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.