Wie ein Cascading Dropdown aufzufüllen mit JQuery

Question

i folgendem Problem:

Ich begann zwei Auswahlmenüs (Land und Stadt) ein JS und es gibt ein Formular mit HTML zu erstellen. jetzt möchte ich diese beiden mit JQuery dynamisch machen, so dass nur die Städte der ausgewählten Länder sichtbar sind.

Ich habe mit einigen grundlegenden JS begonnen, die gut funktionierte, aber einige Probleme in IE macht. Jetzt versuche ich mein JS in JQuery für eine bessere Kompatibilität zu konvertieren.

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 meine JQuery:

http://jsfiddle.net/HvXSz/

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

Answer 1

Es sollte so einfach wie

jQuery(function($) { 
    var locations = { 
     'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'], 
     'Spain': ['Barcelona'], 
     'Hungary': ['Pecs'], 
     'USA': ['Downers Grove'], 
     'Mexico': ['Puebla'], 
     'South Africa': ['Midrand'], 
     'China': ['Beijing'], 
     'Russia': ['St. Petersburg'], 
    } 

    var $locations = $('#location'); 
    $('#country').change(function() { 
     var country = $(this).val(), lcns = locations[country] || []; 

     var html = $.map(lcns, function(lcn){ 
      return '<option value="' + lcn + '">' + lcn + '</option>' 
     }).join(''); 
     $locations.html(html) 
    }); 
}); 

Demo: Fiddle

Answer 2

ich eine zweite Lösung liefern werde, wie dieser Beitrag noch oben in der Google-Suche ist für ‚jquery Kaskade wählen‘. Dies ist das erste Auswahl:

<select class="select" id="province" onchange="filterCity();"> 
    <option value="1">RM</option> 
    <option value="2">FI</option> 
</select> 

und dies ist die zweite, gesperrt, bis das erste ausgewählt ist aus:

<select class="select" id="city" disabled> 
    <option data-province="RM" value="1">ROMA</option> 
    <option data-province="RM" value="2">ANGUILLARA SABAZIA</option> 
    <option data-province="FI" value="3">FIRENZE</option> 
    <option data-province="FI" value="4">PONTASSIEVE</option> 
</select> 

dieses hier nicht sichtbar ist, und wirkt als ein Behälter für alle Elemente gefilterten aus der Auswahl:

<span id="option-container" style="visibility: hidden; position:absolute;"></span> 

Schließlich ist das Skript, das Filter:

<script> 

    function filterCity(){ 
     var province = $("#province").find('option:selected').text(); // stores province 
     $("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select> 
     var toMove = $("#city").children("[data-province!='"+province+"']"); // selects city elements to move out 
     toMove.appendTo("#option-container"); // moves city elements in #option-container 
     $("#city").removeAttr("disabled"); // enables select 
}; 
</script> 

Answer 3

Hier ist ein Paket, das ich vor kurzem geschrieben habe, das tut, was Sie wollen und mehr: Cascading Dropdown Link. Die Demo kann here

Answer 4

ich geschaffen habe Cascading Dropdown

Es ist hilfreich für Land, Region, Stadt und Zip kann jemand zu sehen. Hier wird nur ein Teil des Codes veröffentlicht. Sie können das vollständige Beispiel auf jsfiddle sehen.

//Get html elements 
var countySel = document.getElementById("countySel"); 
var stateSel = document.getElementById("stateSel"); 
var citySel = document.getElementById("citySel"); 
var zipSel = document.getElementById("zipSel"); 

//Load countries 
for (var country in countryStateInfo) { 
    countySel.options[countySel.options.length] = new Option(country, country); 
} 

//County Changed 
countySel.onchange = function() { 

    stateSel.length = 1; // remove all options bar first 
    citySel.length = 1; // remove all options bar first 
    zipSel.length = 1; // remove all options bar first 

    if (this.selectedIndex < 1) 
     return; // done 

    for (var state in countryStateInfo[this.value]) { 
     stateSel.options[stateSel.options.length] = new Option(state, state); 
    } 
} 

Fiddle Demo

Answer 5

I have a handy code. you can just copy it: 
Same as above 


<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
jQuery(function($) { 
    var locations = { 
     'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn', 'asdasdasd'], 
     'Spain': ['Barcelona'], 
     'Hungary': ['Pecs'], 
     'USA': ['Downers Grove'], 
     'Mexico': ['Puebla'], 
     'South Africa': ['Midrand'], 
     'China': ['Beijing'], 
     'Japn': ['tokyo'], 
     'Shuidong': ['shuidongjie','maomingjie'], 
     'Russia': ['St. Petersburg'], 
    } 

    var $locations = $('#location'); 
    $('#country').change(function() { 
     var country = $(this).val(), lcns = locations[country] || []; 

     var html = $.map(lcns, function(lcn){ 
      return '<option value="' + lcn + '">' + lcn + '</option>' 
     }).join(''); 
     $locations.html(html) 
    }); 
}); 
</script> 
</head> 
<body>1 
<label class="page1">Country</label> 
<div class="tooltips" title="Please select the country that the customer will primarily be served from"> 
    <select id="country" name="country" placeholder="Phantasyland"> 
     <option></option> 
     <option>Germany</option> 
     <option>Spain</option> 
     <option>Hungary</option> 
     <option>USA</option> 
     <option>Mexico</option> 
     <option>South Africa</option> 
     <option>China</option> 
     <option>Japn</option> 
     <option>Shuidong</option> 
     <option>Russia</option> 

    </select> 
</div> 
<br /> 
<br /> 
<label class="page1">Location</label> 
<div class="tooltips" title="Please select the city that the customer is primarily to be served from."> 
    <select id="location" name="location" placeholder="Anycity"></select> 
</div> 
</body> 
</html>