Un petit menu lié à la province et aux municipalités a pris beaucoup de temps à explorer. La raison en est qu'il n'est pas qualifié en jQuery. Puisqu'il a travaillé si dur pour terminer un composant, il veut naturellement le partager pour ceux qui ont besoin de l'utiliser.
Il s'agit d'une version de base et elle doit être optimisée plus tard.
Code: Adresse de téléchargement du menu lié à la province et municipal
illustrer:
Je ne parlerai plus de l'instruction SQL, il contient deux fichiers «City.sql» et «Provincial.sql».
1. Parlons d'abord d'obtenir des données
public void InitProcitys () {logger.info ("Obtenez la région"); List <pvivinals> provinces = provinces.me.getProvincials (); pour (provinciaux provinciaux: provinces) {list <villes> villes = villes.me.getCitysbyprovinciALID (provincial.getLong ("id")); Provincial.put ("Citys", Jsonkit.tojson (Citys)); } setAttr ("Provinciaux", provinces); Render ("procity.jsp");}1). Obtenez d'abord tous les menus provinciaux.
2). Obtenez le menu municipal correspondant en fonction de l'ID provincial.
3). Lors de l'obtention de menus municipaux, veuillez noter que la liste est convertie en données JSON et Jackjson est utilisé ici.
2. Parlez de la mise en page
<sélectionnez name = "province_code" id = "province_select"> <c: foreach items = "$ {provincials}" var = "item"> <option value = "$ {item.procode}" cdata = '$ {item.citys}'> $ {item.proname} </ option> </c: forach> </ SELECT> id = "city_select"> </lect>1). Deux sélections ont été utilisées, et aucun styles n'a encore été ajouté
2). Utilisez ForEach pour initialiser le menu provincial en premier et en même temps lier ses données de la ville à l'attribut CDATA.
3. Parlez-moi de l'implémentation JS
$ (function () {provincialChange (); var $ provincial = $ ("# province_select"); $ provincial.change (provincialchange);}); fonction provincialchange () {var $ provincial = $ ("# province_select"); // La valeur de code affichée au niveau provincial var provincial_code = $ provincial.val (); var $ selectedOption = $ ('# province_select option [value =' + provincial_code + ']'); var city_data = yunm.jsoneval ($ selectedOption.attr ("cdata")); // Liste des menues municipales $ City_Select = $ ("# city_select"); $ city_select.empty (); pour (var i = 0; i <city_data.length; i ++) {var code = city_data [i] .code; var cname = city_data [i] .cname; $ city_select.append ("<option valeur = '" + code + "'>" + cname + "</opoption>"); }}1). Lorsque le chargement de l'initialisation des pages et la commutation provinciale du menu, les menus municipaux doivent être chargés
2). Obtenez d'abord le menu provincial, obtenez la valeur actuelle, puis obtenez l'option en fonction de la valeur
3). Obtenez des données municipales à partir de l'option et faites attention à l'utilisation d'évaluation pour convertir les données. La raison spécifique peut être qu'il s'agit principalement d'ajouter ().
4.) Boucle dans le menu municipal et l'affichage de sortie
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation de bootstrap.