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:

http://jsfiddle.net/HvXSz/

ich weiß, es ist sehr einfach, aber ich kann nicht sehen den Wald für die Bäume.

InformationsquelleAutor user2609756 | 2013-08-21
Schreibe einen Kommentar