Html
First, the jquery library and the Cityselect plug-in are loaded into the head.
| The code is as follows |
Copy Code |
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.cityselect.js" ></script> |
Next, in #city, we put three select, and three select Set the Class property to: Prov, city, Dist, respectively, the province, the town, the district (county) three Drop-down boxes. Note If you only want to achieve the provincial and municipal two-level linkage, then remove the third dist Select.
| The code is as follows |
Copy Code |
<div id= "City" >
<select class= "Prov" ></select>
<select class= "City" disabled= "disabled" ></select>
<select class= "dist" disabled= "disabled" ></select>
</div> |
Jquery
Calling the Cityselect plug-in is very simple and calls directly:
| The code is as follows |
Copy Code |
$ ("#city"). Cityselect ();
|
Custom parameter invocation, setting the default provinces and cities.
| The code is as follows |
Copy Code |
$ ("#city"). Cityselect ({
URL: "Js/city.min.js",
Prov: "Hunan",//Province
City: "Changsha",//Cities
Dist: "Yuelu",//Counties
NoData: "None"//when subset has no data, hide Select
});
|
Of course, you can also expand, customize the Drop-down list option data, you can set the Drop-down content as needed, note that the data format must be in JSON format.
| code is as follows |
copy code |
$ ("#city"). Cityselect ({
url:{"CityList": [
{"P": "Front-End Technology", "C": [{"n": "HTML"},{"n": "CSS", "a": [{"S": "CSS2.0"},{"s": "CSS3.0"}]},
{"n": "Javascipt"}]},
{"P": "Programming Language", "C": [{"n": "C"},{"n": "+ +"},{"n": "PHP"},{"n": "JAVA"}]},
{"P": "Database", "C": [{"n": "Mysql"},{"n": "SQL Server"},{"n": "Oracle"}]},
]},
Prov: "",
City: "",
Dist: "",
NoData: "None"
});
|
You can also use the PHP and other background language to convert the data in the database into JSON format, and then use the URL parameters to point to the background address can also achieve no refresh linkage effect.
| The code is as follows |
Copy Code |
$ ("#city"). Cityselect ({
URL: "data.php"
}); |
Integration of the above code
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> the effect of provincial and municipal linkage based on Jquery+json </title>
<link rel= "stylesheet" type= text/css "href=". /css/main.css "/>
<style type= "Text/css" >
. demo{width:80% margin:20px Auto}
. demo h3{height:32px; line-height:32px}
. Demo P{LINE-HEIGHT:24PX}
pre{margin-top:10px padding:6px; background: #f7f7f7}
</style>
<script type= "Text/javascript" src= ". /js/jquery.js "></script>
<script type= "Text/javascript" src= "Js/jquery.cityselect.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#city_1"). Cityselect ({
NoData: "None",
Required:false
});
$ ("#city_2"). Cityselect ({
Prov: "Beijing",
NoData: "None"
});
$ ("#city_3"). Cityselect ({
Prov: "Hunan",
City: "Changsha"
});
$ ("#city_4"). Cityselect ({
Prov: "Hunan",
City: "Changsha",
Dist: "Yuelu",
NoData: "None"
});
$ ("#city_5"). Cityselect ({
url:{"CityList": [
{"P": "Front-End Technology", "C": [{"n": "HTML"},{"n": "CSS", "a": [{"S": "CSS2.0"},{"s": "CSS3.0"}]},{"n": "Javascipt"}]},
{"P": "Programming Language", "C": [{"n": "C"},{"n": "+ +"},{"n": "Objective-c"},{"n": "PHP"},{"n": "JAVA"}]},
{"P": "Database", "C": [{"n": "Mysql"},{"n": "SQL Server"},{"n": "Oracle"},{"n": "DB2"}]},
]},
Prov: "",
City: "",
Dist: "",
NoData: "None"
});
});
</script>
<body>
<div id= "Main" >
<div class= "Demo" >
<p> Two-level linkage, the default option is: Please select </p>
<div id= "City_1" >
<select class= "Prov" ></select>
<select class= "City" disabled= "disabled" ></select>
</div>
<p> three-level linkage, default province: Beijing, hide children without data select</p>
<div id= "City_2" >
<select class= "Prov" ></select>
<select class= "City" disabled= "disabled" ></select>
<select class= "dist" disabled= "disabled" ></select>
</div>
<pre>
$ ("#city_1"). Cityselect ({nodata: "None", required:false});
$ ("#city_2"). Cityselect ({prov: "Beijing", NoData: "None"});
</pre>
</div>
</body>
|
Provinces and cities linkage effect source code download: Http://file.111cn.net/download/2013/05/15/cityselect.rar
