Jquery+php+mysql Two-level linkage drop-down Menu Example Explanation _jquery

Two-level Linkage pull-down menu selection application in many places, such as provinces and cities pull linkage, commodity size category Drop-down Select Linkage. In this paper, we will use Jquery+php+mysql to realize the two-level pull-down linkage effect of size classification by example.
implementation Effect : When you select a large class, the contents of the options in the Drop-down box of the small class are changed as well.

implementation principle: According to the value of large classes, through the value of jquery to the background of PHP processing, PHP query MySQL database, get the corresponding small class, and return JSON data to the front-end processing.
XHTML
first we want to create two Drop-down selection boxes, the first one is the big class, the second is the small class. The value of a large class can be either written in advance or read from a database.

<label> Big class:</label> 
<select name= "Bigname" id= "Bigname" > 
  <option value= "1" > Front-End Technology </option> 
  <option value= "2" > Program development </option> 
  <option value= "3" > 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, get the value of the large class selection box, and pass the $.getjson method to the background server.php, read the back of the JSON data, and traverse the JSON data through the $.each method, write the corresponding value to an option string, 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 original option 
    $.each (json,function (index,array) { 
      var option = <option value= ' +array[' id ']+ ' ' > ' +array[' Title ']+ </option> '; 
      Smallname.append (option);});} 
 

Note that before you iterate through the JSON data append, you must first empty the original items in the small class. There are two ways to empty options, one that is mentioned in the preceding code, and a simpler and more straightforward approach:

Then, execute the calling function after the page is loaded:

$ (function () { 
  getselectval (); 
  $ ("#bigname"). Change (function () { 
    getselectval ();}); 
 

At the beginning of the page, the dropdown box is to set the option, so at the beginning of the call Getselectval (), and when the large class options change, also called Getselectval ().
PHP

Include_once ("connect.php"); Link 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); 
} 

Based on the large class value of jquery, the SQL Statement Query classification table is constructed, and the JSON data is eventually output. This site does not make special instructions in the case of the use of PHP and MySQL connection, and query statements, such as the use of the original statement methods such as mysql_query, the purpose is to enable the reader to know the data transmission query directly.
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 not NULL, 
 PRIMARY KEY (' id ') 

Above is the introduction of the three Jquery+php+mysql combined with how to achieve the two-level linkage drop-down menu, there are some deficiencies in the program, the need to continue to improve, I hope this article can give you a little inspiration.