JQuery uses PHP + MySQL to implement a list of two-level linkage drop-down lists [instances]

Implementation principle: Based on the province value changes, use jQuery to pass sf_id to the background php file for processing. php queries the MySQl database, obtains the corresponding city name, and returns JSON data to the front-end for processing, achieve linkage effect!

For ease of explanation, the province: Henan Province (sf_id = 1) Zhejiang Province (sf_id = 2), and two data tables are created for the city and student information respectively! Encoding method: utf8! Create a database and execute the following SQL statement!

Copy codeThe Code is as follows:/* city table */
Create table if not exists 'dishi '(
'Ds _ id' int (3) auto_increment not null primary key,
'Sf _ id' int (3) not null default '0 ',
'Ds _ name' varchar (50) not null
);
/* Student table */
Create table if not exists 'xuesheng '(
'Xs _ id' int (3) auto_increment not null primary key,
'Ds _ id' int (3) not null default '0 ',
'Xs _ name' varchar (50) not null
); Then we set up a front-end shelf:

Copy codeThe Code is as follows: <table border = "0" width = "100%">
<Tr>
<Td width = 100> province </td>
<Td>
<Select name = "sf_id" id = "sf_id" title = "select Province">
<Option value = "1"> Henan </option>
<Option value = "2"> Zhejiang </option>
</Select>
</Td>
</Tr>
<Tr>
<Td> city </td>
<Td>
<Select name = "ds_id" id = "ds_id" title = "select city">

</Select>
</Td>
</Tr>
<Tr>
<Td> Student name </td>
<Td> <input type = text maxlength = 20 name = "xs_name" value = ""> </td> </tr>
</Table>

The following is the jQuery part. For details, refer to the comments section after the Code:Copy codeThe Code is as follows: <script language = "JavaScript">
Function getVal (){
$. GetJSON ("select. php", {sf_id: $ ("# sf_id"). val ()}, function (json ){
Var ds_id = $ ("# ds_id ");
$ ("Option", ds_id). remove (); // clear the original options. You can also use ds_id.empty ();
$. Each (json, function (index, array ){
Var option = "<option value = '" + array ['ds _ id'] + "'>" + array ['ds _ name'] + "</option>";
Ds_id.append (option );
});
});
}
// The getVal () function is automatically executed when the page is loaded.
$ (). Ready (function (){
GetVal ();
$ ("# Sf_id"). change (function () {// when the province part changes, run the getVal () function.
GetVal ();
});
});
</Script>

Select. php is the key part. This file is received at the front-end through $. the sf_id parameter passed by the getJSON method, and then select. php obtains the corresponding city data based on the province sf_id, and then returns the JSON data. The foreground uses jQuery to process the JSON data and writes it to <option>, which completes the linkage effect!Copy codeThe Code is as follows: $ sf_id = $ _ GET ["sf_id"];
If (isset ($ sf_id )){
$ Q = mysql_query ("select * from dishi where sf_id = $ sf_id ");
While ($ row = mysql_fetch_array ($ q )){
$ Select [] = array ("ds_id" => $ row ['ds _ id'], "ds_name" => urlencode ($ row ['ds _ name']);
}
Echo urldecode (json_encode ($ select ));
}

The urlencode () and urldecode () functions are used to prevent Garbled text in Chinese databases! Note that no other data can be returned in select. php to avoid JSON return errors!

Finally, some children's shoes can be used easily when adding student information. If the student information transmitted needs to be edited, the city where the student to be edited is located cannot be displayed directly! Here we need to add a judgment:

First, make a judgment in the <select name = "ds_id" id = "ds_id" title = "select city"> </select> section above.Copy codeThe Code is as follows: <select name = "ds_id" id = "ds_id" title = "select city">
<? Php if (isset ($ _ GET ['ds _ id']) {// return the location of the student to be edited
$ SQL = "SELECT * FROM dishi WHERE ds_id =". $ ds_id;
$ Resultds = mysql_query ($ SQL, $ conn );
While ($ listds = mysql_fetch_array ($ resultds) {?>
<Option value = "<? Php echo $ listds ['ds _ id']?> "<? Php if ($ listds ['ds _ id'] = $ ds_id) {echo 'selected = "selected" ';}?> Name = "ds_id"> <? Php echo $ listds ['ds _ name']?> </Option>
<? Php }?>
<? Php }?>
</Select>

Then, when loading the page, make a judgment before executing the getVal () function for the first time. For more information, see the comments section:Copy codeThe Code is as follows: $ (). ready (function (){
// When $ ds_id is not blank, it indicates loading the modified form. At this time, the getVal () function cannot be called immediately during page loading, to avoid displaying the income and expenditure categories of the accounts to be modified
<? Php if (empty ($ ds_id) {?> // When $ ds_id is blank, it indicates loading the Add form. In this case, call the getVal () function when loading the page to display the subcategories of the current revenue and expenditure type.
GetVal ();
<? Php }?>
$ ("# Sf_id"). change (function (){
GetVal ();
});
});

Okay, it's almost over!