Effets de liaison provinciaux et municipaux de deuxième et troisième niveaux basés sur jQuery JSON_jquery

Les effets déroulants de liaison entre provinces et villes sont largement utilisés dans le WEB, en particulier dans certains systèmes d'information sur les membres et sites de commerce électronique. Les développeurs utilisent généralement Ajax pour implémenter des liens déroulants sans actualisation. Cet article décrira comment utiliser le plug-in jQuery pour obtenir l'effet de liaison de deuxième (troisième) niveau de liste déroulante dynamique des provinces et des villes sans actualiser en lisant les données JSON.

HTML

Chargez d’abord la bibliothèque jquery et le plug-in cityselect dans le head.

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

Ensuite, nous plaçons trois sélections dans #city et définissons les attributs de classe des trois sélections sur : prov, city et dist, qui représentent respectivement les trois listes déroulantes de province, ville et district (comté). . Notez que si vous souhaitez uniquement obtenir le lien de deuxième niveau entre les provinces et les villes, supprimez simplement la troisième sélection de distribution.

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

jQuery

Appeler le plug-in cityselect est très simple, il suffit de l'appeler directement :

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

Appel de paramètre personnalisé, définissez la province et la ville par défaut.

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

Bien sûr, vous pouvez également étendre et personnaliser les données des options de la liste déroulante. Vous pouvez définir le contenu de la liste déroulante selon vos besoins. Notez que le format des données doit être au format JSON.

 
$("#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" 
}); 

Vous pouvez également utiliser des langages backend​​tels que PHP pour convertir les données de la base de données au format JSON, puis utiliser le paramètre url pour pointer vers l'adresse du backend afin d'obtenir un effet de liaison sans actualisation.

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.