JQuery + PHP + MySQL implementation level-2 linkage drop-down menu

The secondary linkage drop-down menu selects applications in many places, such as provincial/municipal pull-down linkages and commodity large/small drop-down linkages. This article will explain how to use jQuery + PHP + MySQL to achieve the two-level drop-down association effect of size classification through examples.

The effect is that when you select a category, the option content in the small category drop-down box also changes. Implementation principle: based on the values of various categories, the values are transmitted to the backend PHP for processing through jQuery. PHP queries the MySQl database to obtain the corresponding small classes and returns JSON data to the front end for processing.

XHTML

First, we need to create two drop-down selection boxes. The first is the main category, and the second is the small class. The values of a category can be pre-written or read from the database.

<Label> category: </label> <select name = "bigname" id = "bigname"> <option value = "1"> frontend technology </option> <option value = "2"> Program development </option> <option value = "3"> database </option> </select> <label> class: </label> <select name = "smallname" id = "smallname"> </select>

JQuery

First, write a function to obtain the value of the Category Selection box, and use $. the getJSON method is passed to the backend server. php, read the JSON data returned by the background, and use $. the each method traverses JSON data, writes the corresponding value to an option string, and appends the option to a small class.

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

Note: Before appending JSON data, you must clear the original items in the sub-class. There are two methods to clear options: one is mentioned in the code above, and the other is simpler and more straightforward:

smallname.empty(); 

Then, after loading the page, execute the call function:

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

At the beginning of the page, you need to set the options in the drop-down box. Therefore, you need to call getSelectVal () at the beginning. When the main options change, getSelectVal () is also called ().

PHP

Include_once ("Connect. PHP "); // link to the 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 );}

Construct an SQL statement to query a category table based on the value of a category passed by jQuery, and finally output JSON data. This site uses the original statement methods such as mysql_query to connect PHP to MySQL and query statements without special instructions, the purpose is to enable the reader to intuitively know the data transmission query.

Finally, I would like to remind you to remember to load the jquery class library ....