Provincial and municipal second- and third-level linkage effects based on jQuery JSON_jquery

Province and city linkage drop-down effects are widely used in WEB, especially in some member information systems and e-commerce websites. Developers generally use Ajax to implement refresh-free drop-down linkage. This article will describe how to use the jQuery plug-in to achieve the second (third) level linkage effect of dynamic drop-down of provinces and cities without refreshing by reading JSON data.

HTML

First load the jquery library and cityselect plug-in in the head.

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

Next, we place three selects in #city, and set the class attributes of the three selects to: prov, city, and dist, which respectively represent the three drop-down boxes of province, city, and district (county). Note that if you only want to achieve the second-level linkage of provinces and cities, just 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, just call it directly:

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

Custom parameter call, set the default province and city.

 
$("#city").citySelect({ 
  url:"js/city.min.js", 
  prov:"湖南", //省份 
  city:"长沙", //城市 
  dist:"岳麓区", //区县 
  nodata:"none" //当子集无数据时，隐藏select 
}); 

Of course, you can also extend and customize the drop-down list option data. You can set the drop-down content as needed. Note that the data format must be JSON format.

 
$("#city").citySelect({ 
  url:{"citylist":[ 
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]}, 
    {"n":"JAVASCIPT"}]}, 
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
}); 

You can also use backend languages ​​​​such as PHP to convert the data in the database into JSON format, and then use the url parameter to point to the backend address to achieve a refresh-free linkage effect.

 
$("#city").citySelect({ 
  url:"data.php" 
}); 

The above is the entire content of this article, I hope you all like it.