The effect of Jquery+php+json in provinces and cities

Source: Internet
Author: User
Tags jquery library

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.