Example of jQuery+PHP+MySQL two level linkage drop down menu

  • 2020-09-16 07:18:53
  • OfStack

Two-level linkage dropdown menu selection is applied in many places, such as the provincial and municipal dropdown linkage and the commodity size category dropdown selection linkage. In this paper, the use of jQuery+PHP+MySQL to achieve size classification level 2 drop down linkage effect will be explained through an example.
What it looks like: When you select a large category, the options in the small category drop-down box change as well.

Implementation principle: according to the value of the category, jQuery sends the value to the background PHP for processing. PHP gets the corresponding small class by inquiring the MySQl database, and returns JSON data to the front end for processing.
XHTML
First we create two drop-down selection boxes, the first for the large class and the second for the small class. The class values can be pre-written or read from the database.


<label> Main categories: </label> 
<select name="bigname" id="bigname"> 
  <option value="1"> The front-end technology </option> 
  <option value="2"> Application development </option> 
  <option value="3"> The database </option> 
</select> 
<label> Small class: </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 category selection box, pass it to the background server.php through the $.getJSON method, read the JSON data returned by the background, iterate over the JSON data through the $.each method, write the corresponding value into an option string, and finally append option to the small class.


function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); // Empty the existing options  
    $.each(json,function(index,array){ 
      var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
      smallname.append(option); 
    }); 
  }); 
} 

Note that before traversing the JSON data append 1 must first clear the existing items in the class. There are two ways to clear the option, one is mentioned in the above code, and the other is a simpler and more direct method:


smallname.(); 

Then, after the page loads, the calling function executes:


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

The drop-down box sets the options at the beginning of the page, so getSelectVal() is called at the beginning, and getSelectVal() is called when the broad class options change.
PHP


include_once("connect.php"); // Linked database  
 
$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); 
} 

According to the value value of the large category passed by jQuery, the SQL statement is constructed to query the classification table and finally output JSON data. This site in the case of the use of PHP and MySQL connection, and query statements are used in the original statement such as mysql_query, the purpose is to let the reader can intuitively know the data transmission query.
Finally, the MYSQL table structure is attached:


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; 

Above is the introduction of jQuery+PHP+MySQL3 combined with how to achieve the 2-level linkage drop-down menu, the program still has some shortcomings, need to continue to improve, I hope this article can give you a point of inspiration.


Related articles: