(Practical article) Jquery+php+mysql implementation of the two-level linkage drop-down menu

Two-level linkage drop-down menu selection application in many places, such as the provincial and municipal pull linkage, commodity size category pull-down selection linkage. This article will use the Jquery+php+mysql to achieve the size classification of two-level pull-down linkage effect.

First look at the effect

Big class:Front-end TechnologyProgram DevelopmentDatabaseSmall class:

The effect of the implementation is that when you select a large class, the options in the drop-down box of the small class change as well. Implementation principle: According to the value of the large class, through jquery to the background PHP processing, PHP by querying the MySQL database, get the corresponding small class, and return the JSON data to the front-end processing.

XHTML

First we want to set up 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 pre-written or read from the database.

<label> Large class:</label> <select name= "Bigname" id= "Bigname" >    <option value= "1" > Front-end technology </ option>    <option value= "2" > Program Development </option>    

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 JSON data returned in the background, and through the $.each method to traverse the JSON data, write the corresponding value to an option string, Finally, option is appended to the small class.

functionGetselectval () {$. Getjson ("server.php", {bigname:$ ("#bigname"). Val ()},function(JSON) {varSmallname = $ ("#smallname"); $("option", Smallname). Remove ();//clear the original options$. each(JSON,function(Index,Array){             varoption = "<option value= '" +Array[' id ']+ ' > ' +Array[' title ']+ ' </option> '; Smallname.append (option);     }); }); } 

Note that you must first empty the original items in the small class before traversing the JSON data append. There are two ways to empty an option, one of which is mentioned in the preceding code, and there is a simpler and more straightforward approach:

Smallname. Empty

Then, execute the calling function after the page loads:

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

In the initial page, the drop-down box is to set the options, so at the beginning of the call Getselectval (), and when the big class options change, also called the 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]); }     EchoJson_encode ($select); } 

Based on the value values of the large classes passed by jquery, the SQL statement is constructed to query the classification table and eventually output the JSON data. This site in the case of no special description of the use of PHP and MySQL connection, and query statements such as the use of the original statement method such as mysql_query, etc., the purpose is to enable the reader to understand the data transmission query intuitively.

Finally, the MySQL table structure is attached:

CREATE TABLE ' catalog ' (   ' id ' mediumint (NULL auto_increment,   ' CID ' Mediumint (  Nulldefault ' 0 ',   ' title ' varchar (null,   KEY   (' id ')) ENGINE=myisam  DEFAULT

(Practical article) Jquery+php+mysql implementation of the two-level linkage drop-down menu