jQuery PHP MySQL secondary linkage drop-down menu example explanation_jquery

Second-level linkage drop-down menu selection is used in many places, such as province and city drop-down linkage, and product size drop-down selection linkage. This article will explain through examples how to use jQuery PHP MySQL to achieve the secondary drop-down linkage effect of size classification.
Implementation effect: When a major category is selected, the options in the sub-category drop-down box also change.

Implementation principle: According to the value of the major category, the value is passed to the background PHP for processing through jQuery. PHP queries the MySQl database to obtain the corresponding small category and returns JSON data For front-end processing.
XHTML
First we need to create two drop-down selection boxes, the first is a major category and the second is a small category. The values ​​of major categories can be written in advance or read from the database.

<label>大类：</label> 
<select name="bigname" id="bigname"> 
  <option value="1">前端技术</option> 
  <option value="2">程序开发</option> 
  <option value="3">数据库</option> 
</select> 
<label>小类：</label> 
<select name="smallname" id="smallname"> 
<option value="1">flash</option> 
<option value="2">ps</option> 
</select> 

jQuery
First write a function to get the value of the large category selection box, pass it to the backend server.php through the $.getJSON method, read the JSON data returned by the backend, and traverse the JSON data through the $.each method to write the corresponding value. An option string, and finally append the option to the subclass.

function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); //清空原有的选项 
    $.each(json,function(index,array){ 
      var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
      smallname.append(option); 
    }); 
  }); 
} 

Note that before traversing and appending JSON data, you must first clear the original items in the subcategory. There are two ways to clear options, one is mentioned in the code above, and there is a simpler and more direct method:

smallname.(); 

Then, execute the calling function after the page loads:

$(function(){ 
  getSelectVal(); 
  $("#bigname").change(function(){ 
    getSelectVal(); 
  }); 
}); 

When the page is initialized, the drop-down box needs to set the options, so getSelectVal() is called at the initial stage, and when the major category options change, getSelectVal() is also called.
PHP

include_once("connect.php"); //链接数据库 
 
$bigid = $_GET["bigname"]; 
if(isset($bigid)){ 
  $q=mysql_query("select * from catalog where cid = $bigid"); 
  while($row=mysql_fetch_array($q)){ 
    $select[] = array("id"=>$row[id],"title"=>$row[title]); 
  } 
  echo json_encode($select); 
} 

Construct an SQL statement to query the classification table based on the value of the major category passed by jQuery, and finally output JSON data. Without special instructions, the PHP and MySQL connections and query statements used by this site all use original statement methods such as mysql_query, etc. The purpose is to allow readers to intuitively know the data transmission query.
Finally, attach the MYSQL table structure:

CREATE TABLE `catalog` ( 
 `id` mediumint(6) NOT NULL auto_increment, 
 `cid` mediumint(6) NOT NULL default '0', 
 `title` varchar(50) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

The above is an introduction to how to implement a secondary linkage drop-down menu by combining jQuery, PHP, and MySQL. The program still has some shortcomings and needs to be improved. I hope this article can give you some inspiration.