The so-called two-level linkage, in fact, a little bit of JS are not unfamiliar, about the implementation of the two-level linkage, not the use of JQ, but the original eco-JS Some, efficiency will be better, but personal feeling with jq write, the idea will be clear point.
Code: HTML section
<select name= "" id= "Province" >
<option> Please select </option>
<option value=1> Guangdong </option >
<option value=2> hunan </option>
</select>
<select name= "" id= "City" >
<option> Please select </option>
</select>
jq section
<script type= "Text/javascript" >
$ ( Document). Ready (function () {
$ ("#province"). Change (function () {
$.ajax ({
type: Post),
URL: " Index/city?id= "+$ (This). Val (),
datatype:" JSON ",
success:function (data) {
var sm = eval (data);
var str= ' <option> please choose </option> ';
for (i=0;i<sm.length;i++) {
str+= ' <option value= ' +sm[i].id+ ' > ' +sm[i].name+ ' </option> ';
}
$ ("#city"). html (str);
}}); </script>
After the province is selected, the ID of the province is passed to the city page, and then all the cities below it are queried from the database, and then the JSON data (data) is returned, for example, after selecting Guangdong, the JSON data format returned is:
[{"id": "3″," pid ":" 1″, "name": "\u5e7f\u5dde", "ename": "Guangzhou"},{"id": "4″," pid ":" 1″, "name": "\u6df1\u5733″," Ename ":" Shenz "},{" id ":" 5″, "pid": "1″," name ":" \u4e2d\u5c71″, "ename": "Www.111cn.net"}]