Wie füllen Sie eine cascading Dropdown mit JQuery
ich habe Folgendes problem:
Begann ich ein Formular erstellen mit HTML eine JS und es gibt zwei Dropdowns (Land und Stadt). nun möchte ich diese beiden dynamisch mit JQuery so, dass nur die Städte die ausgewählten Länder sind sichtbar.
Habe ich begonnen, mit einigen grundlegenden JS, die geklappt hat, aber macht einige Probleme im IE. Jetzt versuche ich meine konvertieren JS zu JQuery für eine bessere Kompatibilität.
Meine ursprüngliche JS sieht wie folgt aus:
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Germany") {
var optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
} else if (s1.value == "Hungary") {
var optionArray = ["|", "pecs|Pecs", "budapest|Budapest", "debrecen|Debrecen"];
} else if (s1.value == "Russia") {
var optionArray = ["|", "st. petersburg|St. Petersburg"];
} else if (s1.value == "South Africa") {
var optionArray = ["|", "midrand|Midrand"];
} else if (s1.value == "USA") {
var optionArray = ["|", "downers grove|Downers Grove"];
} else if (s1.value == "Mexico") {
var optionArray = ["|", "puebla|Puebla"];
} else if (s1.value == "China") {
var optionArray = ["|", "beijing|Beijing"];
} else if (s1.value == "Spain") {
var optionArray = ["|", "barcelona|Barcelona"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
};
und hier mein Jquery:
ich weiß, es ist sehr einfach, aber ich kann nicht sehen den Wald für die Bäume.
- Ihre Geige wurde nicht jsfiddle.net/arunpjohny/2pza5/1
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollte es so einfach wie
Demo: Fiddle
map
funktioniert nicht auf IE-version < 9 (link). Sie müssen die polyfill.Ich bin gehen, um eine zweite Lösung, als dieser Beitrag noch aktuell ist, in der Google-Suche für 'jquery Kaskade auswählen'.
Dies ist die erste Auswahl:
- und das ist die zweite deaktiviert, bis die ersten ausgewählt ist:
dieser ist nicht sichtbar und dient als container für alle Elemente herausgefiltert, die von der Auswahl:
Schließlich das Skript, das Filter:
Ich erstellt habe, cascading Dropdown für Land, Bundesland, Stadt und Postleitzahl
Kann es jemandem helfen zu können. Hier nur einen Teil des Codes gepostet werden, die Sie sehen können, voll funktionsfähiges Beispiel auf jsfiddle.
Fiddle Demo
Dies ist ein Beispiel, das ich getan habe. Ich Wünsche mir, dass wird hilfreich sein für Sie.
JS:
HTML: