JQuery + PHP + MySQL two-level linkage drop-down menu example _ jquery

This article mainly introduces a two-level linkage drop-down menu based on jQuery + PHP + MySQL. For more information, see the two-level linkage drop-down menu, for example, the provincial/municipal drop-down Association and commodity drop-down selection Association. This article will explain how to use jQuery + PHP + MySQL to achieve the two-level drop-down Association effect of size classification through examples.
Effect: When you select a category, the option content in the small category drop-down box also changes.

Implementation principle:Based on the value of the main category, the value is transmitted to the backend PHP for processing through jQuery. PHP queries the MySQl database to obtain the corresponding small class 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.

Category:    Front-end technology   Program Development   Database  Sub-category:  Flash Ps  

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 =""+ Array ['title'] +""; 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.(); 

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.
The MYSQL table structure is attached as follows:

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 section describes how to implement the two-level linkage drop-down menu based on jQuery + PHP + MySQL. The program still has some shortcomings and needs to be improved. I hope this article will give you some inspiration.