Heim > Artikel > Web-Frontend > Provinz- und kommunale Verknüpfungseffekte zweiter und dritter Ebene basierend auf jQuery JSON_jquery
Dropdown-Effekte für Provinz- und Stadtverknüpfungen werden im WEB häufig verwendet, insbesondere in einigen Mitgliederinformationssystemen und E-Commerce-Websites. Entwickler verwenden im Allgemeinen Ajax, um eine aktualisierungsfreie Dropdown-Verknüpfung zu implementieren. In diesem Artikel wird beschrieben, wie Sie mit dem jQuery-Plug-in den Verknüpfungseffekt der zweiten (dritten) Ebene des dynamischen Dropdowns von Provinzen und Städten ohne Aktualisierung durch Lesen von JSON-Daten erzielen.
HTML
Laden Sie zunächst die JQuery-Bibliothek und das Cityselect-Plug-In in den Kopf.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cityselect.js"></script>
Als nächstes platzieren wir drei Selects in #city und setzen die Klassenattribute der drei Selects auf: prov, city und dist, die jeweils die drei Dropdown-Felder Provinz, Stadt und Bezirk (Landkreis) darstellen. . Beachten Sie: Wenn Sie nur die Verknüpfung von Provinzen und Städten auf der zweiten Ebene erreichen möchten, entfernen Sie einfach die dritte Dist-Auswahl.
<div id="city"> <select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select> </div>
jQuery
Der Aufruf des Cityselect-Plugins ist sehr einfach, rufen Sie es einfach direkt auf:
$("#city").citySelect();
Benutzerdefinierter Parameteraufruf, legen Sie die Standardprovinz und -stadt fest.
$("#city").citySelect({ url:"js/city.min.js", prov:"湖南", //省份 city:"长沙", //城市 dist:"岳麓区", //区县 nodata:"none" //当子集无数据时,隐藏select });
Natürlich können Sie die Dropdown-Listen-Optionsdaten auch erweitern und anpassen. Beachten Sie, dass das Datenformat das JSON-Format sein muss.
$("#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" });
Sie können auch Backend-Sprachen wie PHP verwenden, um die Daten in der Datenbank in das JSON-Format zu konvertieren, und dann den URL-Parameter verwenden, um auf die Backend-Adresse zu verweisen, um einen aktualisierungsfreien Verknüpfungseffekt zu erzielen.
$("#city").citySelect({ url:"data.php" });
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.