Jak wypełnić rozwijanej kaskadowy z jQuery

Question

Mam następujący problem:

zacząłem tworzyć formularz z HTML JS i istnieją dwa Dropdowns (kraj i miasto). teraz chcę zrobić te dwie dynamiczne z JQuery, tak aby widoczne były tylko miasta wybranych krajów.

Zacząłem od podstawowego JS, który działał dobrze, ale sprawia problemy w IE. Teraz próbuję przekonwertować mój JS do JQuery dla lepszej kompatybilności.

Moja oryginalna JS wygląda następująco:

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); 
    } 
}; 

i tu moja Jquery:

http://jsfiddle.net/HvXSz/

wiem, że to jest bardzo proste, ale nie widzę dla drewna drzew.

Answer 1

Należy tak proste, jak

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

Idę do zapewnienia drugiego rozwiązania, jak ten post jest wciąż w wyszukiwarce Google dla „jquery kaskada wybierz”. Pierwsza wybrać:

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

a to drugie wyłączone, aż pierwszy wybrany:

<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> 

to nie jest widoczna, i służy jako pojemnik dla wszystkich elementów przesączono przez wybór:

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

Wreszcie skrypt, który filtruje:

<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

Oto pakiet, który napisałem niedawno, który robi to, o co prosisz, i więcej: Cascading Dropdown Link. Demo można zobaczyć here

Answer 4

Stworzyłem kaskadowe rozwijanej dla kraju, województwa, miasta i ZIP

może to pomocne dla kogoś. Tutaj zamieszczona jest tylko część kodu, możesz zobaczyć pełny przykład pracy na jsfiddle.

//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>