The _jquery of the two or three-level linkage effect in provinces and cities based on Jquery+json

Provincial urban linkage pull down effect in the Web application is very wide, especially in some member information systems, electrical business site is most common. Developers generally use AJAX to achieve no flush pull linkage. This article will describe, using the jquery plug-in, through the reading of JSON data, without refreshing dynamic Drop-down provinces two (three)-level linkage effect.

Html

First, the jquery library and the Cityselect plug-in are loaded into the head.

 
<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.

 
<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:

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

Custom parameter invocation, setting the default provinces and cities.

 
$ ("#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.

 
$ ("#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.

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

The above mentioned is the entire content of this article, I hope you can enjoy.