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

Source: Internet
Author: User
Tags php and jquery library

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.

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.