SoFunction
Updated on 2025-02-28

The provincial and municipal linkage effect based on jQuery+JSON

The pull-down effect of provincial, municipal and district linkage is widely used in WEB, especially in some member information systems and e-commerce websites. Developers generally use Ajax to achieve refresh-free pull-down linkage. This article will tell you that by using the jQuery plug-in, the second (third) level linkage effect of reading JSON data is achieved without refresh.

HTML

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

 
<script type="text/javascript" src="js/"></script> 
<script type="text/javascript" src="js/"></script>

Next, we place three selects in #city, and the three selects set the class attributes to: prov, city, and dist, respectively, representing the three drop-down boxes of province, city, and district (county). Note that if you only want to achieve provincial and municipal secondary linkage, just remove the select of the third dist.

 
<div > 
   <select class="prov"></select> 
  <select class="city" disabled="disabled"></select> 
  <select class="dist" disabled="disabled"></select> 
</div>

jQuery

Calling the cityselect plugin is very simple, just call it directly:

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

Custom parameter calls, set the default province, city and district.

 
$("#city").citySelect({ 
  url:"js/", 
  prov:"Hunan", //province  city:"Changsha", //City  dist:"Yuelu District", // District and County  nodata:"none" //Hide select when there is no data in the subset});

Of course, you can also expand and customize the drop-down list option data. You can set the drop-down content as needed, and note that the data format must be 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":"C++"},{"n":"PHP"},{"n":"JAVA"}]}, 
    {"p":"database","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]}, 
  ]}, 
  prov:"", 
  city:"", 
  dist:"", 
  nodata:"none" 
});

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

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

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