Two level three linkage effect of provincial and municipal counties based on Jquery+json

The provincial urban linkage pull-down effect is widely used in the web, especially in some member information systems and e-commerce websites. Developers generally use Ajax to achieve a no-refresh pull-down linkage. This article will describe the use of jquery plug-ins, by reading JSON data, to achieve non-refresh dynamic pull-down two (three) level linkage effect.

Html

First load the jquery library and the Cityselect plugin into the head.

<script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript" src="js/ Jquery.cityselect.js"

Next, we place three select in the #city, and three select sets the Class property as: Prov, city, Dist, respectively, three drop-down boxes for provincial, municipal, and district (counties). Note If you only want to achieve two-level linkage between provinces and cities, then remove the third dist Select.

<div id=" City"> <Select class="Prov"></Select> <Select class=" City"Disabled="Disabled"></Select> <Select class="Dist"Disabled="Disabled"></Select> </div>

Jquery

Calling the Cityselect plugin is straightforward and calls directly:

$ ("#city"). Cityselect ();  

Custom parameter calls to set the default provinces and cities area.

$("#city"). Cityselect ({URL:"Js/city.min.js", Prov:"Hunan",//ProvincesCity"Changsha",//CityDist"Yuelu District",//CountiesNoData"None" //Hide Select when no data is in a subset});

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.

$("#city"). Cityselect ({url:{"CityList":[         {"P":"Front-end technology","C":[{"N":"HTML"},{"N":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},         {"N":"Javascipt"}]},         {"P":"Programming Languages","C":[{"N":"C"},{"N":"C + +"},{"N":"PHP"},{"N":"JAVA"}]},         {"P":"Database","C":[{"N":"Mysql"},{"N":"SQL Server"},{"N":"Oracle"}]}, "}, Prov:"", City:"", Dist:"", NoData:"None" }); 

You can also use the background language such as PHP 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.

$ ("#city"). Cityselect ({     URL:"data.php ")

Download Source Http://files.cnblogs.com/files/jiuge/cityselect.rar

Two level three linkage effect of provincial and municipal counties based on Jquery+json