Heim  >  Artikel  >  Web-Frontend  >  Provinz- und kommunale Verknüpfungseffekte zweiter und dritter Ebene basierend auf jQuery JSON_jquery

Provinz- und kommunale Verknüpfungseffekte zweiter und dritter Ebene basierend auf jQuery JSON_jquery

WBOY
WBOYOriginal
2016-05-16 15:56:34979Durchsuche

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn