Ein kleines Menü provinziell und kommunaler Menü brauchte viel Zeit, um zu erkunden. Der Grund ist, dass es in JQuery nicht geschickt ist. Da es so schwer funktioniert hat, eine Komponente zu vervollständigen, möchte es sie natürlich für diejenigen teilen, die sie verwenden, um sie zu verwenden.
Dies ist nur eine grundlegende Version und muss später optimiert werden.
Code: Provinziale und kommunalbezogene Menü -Download -Adresse
veranschaulichen:
Ich werde nicht mehr über die SQL -Anweisung sprechen, es enthält zwei Dateien "City.sql" und "provincial.sql".
1. Lassen Sie uns zuerst darüber sprechen, Daten zu erhalten
public void initProcitys () {logger.info ("Get the Region"); Liste <Provincials> provinces = provinces.me.getProvincials (); für (Provincials Provincial: Provinces) {List <Citys> cities = Citys.me.getCitysByProvincialid (provincial.getLong ("id")); Provincial.put ("Citys", jsonkit.tojson (Citys)); } setattr ("Provinzen", Provinzen); render ("procity.jsp");}1). Holen Sie sich zuerst alle Provinzmenüs.
2). Holen Sie sich das entsprechende Kommunalmenü gemäß der Provinz -ID.
3). Beachten Sie beim Erhalten von Kommunalmenüs, dass die Liste in JSON -Daten konvertiert wird und Jackjson hier verwendet wird.
2. Über das Seitenlayout sprechen
<select name = "province_code" id = "province_select"> <c: foreach items = "$ {provincials}" var = "item"> <option value = "$ {item.Procode}" CDATA = '$ {item.citys}'> $ {item.proname} </option> </C: foreach> </c: foreach> </c: foreach> </c: foreach> </c: foreach> </c: foreach> </c: foreach> </c: foreach> </c: foreach> </c. id = "City_Select"> </select>1). Es wurden zwei Auswahl verwendet, und es wurden noch keine Stile hinzugefügt
2). Verwenden Sie für die Initialisierung des Provinzmenüs zuerst und binde gleichzeitig seine Stadtdaten an das CDATA -Attribut.
3. Erzählen Sie mir von der Implementierung von JS
$ (function () {provincialChange (); var $ provincial = $ ("#province_select"); $ provincial.change (provincialChange); // Der Codewert, der auf der Provinzebene angezeigt wird, var provincial_code = $ provincial.val (); var $ selectedoption = $ ('#province_select option [value =' + provincial_code + ']'); var City_data = yunm.jsoneval ($ selectedoption.attr ("CDATA")); // Stadtmenüliste $ City_Select = $ ("#City_Select"); $ City_Select.Empty (); für (var i = 0; i <city_data.length; i ++) {var code = city_data [i] .code; var cname = City_data [i] .Cname; $ City_Select.Append ("<option value = '"+code+"'>"+cname+"</option>"); }}1). Wenn die Page -Initialisierung Lade- und Provinzmenü -Switching -Menü -Menüs geladen werden müssen
2). Erhalten Sie zuerst das Menü Provinz, erhalten Sie den aktuellen Wert und erhalten Sie dann die Option entsprechend dem Wert
3). Holen Sie sich kommunale Daten von der Option und achten Sie darauf, dass EVENT zum Konvertieren der Daten verwendet wird. Der spezifische Grund kann sein, dass es hauptsächlich add () ist.
4.) Schleifen Sie durch das Kommunalmenü und Ausgabeanzeige
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, Bootstrap -Programme zu lernen.