<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<script type= "Text/javascript" src= "Jquery/jquery-1.11.0.js" ></script>
<script type= "Text/javascript" >
$ (). Ready (function () {
Click Load Province Name
$ ("#btn"). Click (function () {
Alert ("Asasassa");
Clear the option of the existing city before changing the province
$ ("[name = ' Sheng ']"). HTML ("<option>== province ==</option>");
Clear the option of the existing city before changing the province
$ ("[name = ' Shi ']"). HTML ("<option>== City ==</option>");
Clear the existing county and county before changing the province
$ ("[name = ' qu ']"). HTML ("<option>== counties ==</option>");
Request data
$.get ("./json/sheng.json",
function (data) {
$ (data). Each (function (i) {
Load option dynamically and set the data
var Opsheng = "<option></option>";
$ ("[name= ' Sheng ']"). Append (Opsheng);
$ ("[name= ' Sheng '] option"). EQ (i+1). Text (data[i].name);
$ ("[name= ' Sheng '] option"). EQ (i+1). Val (Data[i]. Proid);
});
}),
"JSON"
});
How the provinces perform when they change
$ ("[name= ' Sheng ']"). Bind ("Change", function () {
Clear the option of the existing city before changing the province
$ ("[name = ' Shi ']"). HTML ("<option>== City ==</option>");
Clear the existing county and county before changing the province
$ ("[name = ' qu ']"). HTML ("<option>== counties ==</option>");
Get the name of the province being clicked
var Shengid = $ ("[name = ' Sheng '] option:selected"). Val ();
Request data
$.get ("./json/shi.json",
function (data) {
As the next label of option
var index = 1;
$ (data). Each (function (i) {
if (Shengid = = Data[i]. Proid) {
Load option dynamically and set the data
var Opshi = "<option></option>";
$ ("[Name= ' Shi ']"). Append (Opshi);
$ ("[Name= ' shi '] option"). EQ (index). text (data[i].name);
$ ("[Name= ' shi '] option"). EQ (Index). val (Data[i]. Cityid);
index++;
}
});
},
"JSON"
);
});
Methods of implementation when cities change
$ ("[Name= ' Shi ']"). Bind ("Change", function () {
Get the selected city name ID
var shiid = $ ("[name = ' Shi '] option:selected"). Val ();
Clear the original option before the city changes
$ ("[name = ' qu ']"). HTML ("<option>== counties ==</option>");
Request data
$.get ("./json/qu.json",
function (data) {
Subscript Number as option
var index = 1;
$ (data). Each (function (i) {
if (shiid = = Data[i]. Cityid) {
To add an option to an additional zone
var Opshi = "<option></option>";
$ ("[name= ' qu ']"). Append (Opshi);
$ ("[name= ' qu '] option"). EQ (index). Text (Data[i]. Disname);
$ ("[name= ' qu '] option"). EQ (Index). val (Data[i]. Cityid);
index++;
}
});
},
"JSON"
);
});
});
</script>
<body>
<input type= "button" Name= "btn" id= "btn" value= "Import province name"/>
<br>
<select name= "Sheng" style= "width:150px;height:200px;" multiple= "multiple" >
<!--<option>== Province ==</option>-->
</select>
<select name= "Shi" style= "width:150px;height:200px; multiple=" multiple ">
<!--<option>== City ==</option>-->
</select>
<select name= "Qu" style= "width:150px;height:200px;" multiple= "multiple" >
<!--<option>== counties ==</option>-->
</select>
</body>
This article is from the "10917283" blog, please be sure to keep this source http://10927283.blog.51cto.com/10917283/1899586
Three-level linkage and Ajax simulation requests in urban areas