Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:56:34
original
984 Les gens l'ont consulté

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> 
Copier après la connexion

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> 
Copier après la connexion

jQuery

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

 
$("#city").citySelect(); 
Copier après la connexion

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 
}); 
Copier après la connexion

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" 
}); 
Copier après la connexion

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" 
}); 
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!