Как заполнить каскадные выпадающие с jQuery

У меня следующая проблема:

Я начал создавать форму с HTML и JS, и есть два выпадающих списка (страна и город). теперь я хочу сделать эти два динамичных с JQuery так, чтобы были видны только города выбранных стран.

Я начал с некоторых основных JS, которые работали нормально, но создают некоторые проблемы в IE. Теперь я пытаюсь преобразовать JS в JQuery для лучшей совместимости.

мой оригинальный JS выглядит так это:

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

и вот мой Jquery:

http://jsfiddle.net/HvXSz/

Я знаю, что это очень просто, но я не вижу леса для деревьев.

8
cascadingdropdown html-select javascript jquery

5 ответов

это должно быть так же просто, как

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

демо: Скрипка

38

Я собираюсь предоставить второе решение, так как этот пост все еще находится в поиске Google для "jQuery cascade select". Это первый выбор:

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

и это второй, отключен, пока не выбран первый:

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

этот не виден и действует как контейнер для всех элементов, отфильтрованных выбором:

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

наконец, скрипт, который фильтрует:

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

Я создал каскадный раскрывающийся список для страны, штата, города и Zip

это может кому-то помочь. Здесь размещена только часть кода, Вы можете увидеть полный рабочий пример на 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);
     }
}

Скрипка Демо

3

Это пример, который я сделал. Хотел бы я, чтобы это вам пригодилось.

$(document).ready(function(){

    var ListNiveauCycle = [{"idNiveau":1,"libelleNiveau":"CL1","idCycle":1},{"idNiveau":26,"libelleNiveau":"Niveau 22","idCycle":24},{"idNiveau":34,"libelleNiveau":"CL3","idCycle":1},{"idNiveau":35,"libelleNiveau":"DAlf3","idCycle":1}];
    console.log(ListNiveauCycle);
	
	
	function remplirListNiveau(idCycle){
			console.log('remplirListNiveau');
			var $niveauSelect = $("#niveau");
			// vider la liste
			$niveauSelect.empty();
			 for (var i = 0; i < ListNiveauCycle.length; i++) {
				 			if(ListNiveauCycle[i].idCycle==idCycle){
		                        var opt1 = document.createElement('option');
		                        opt1.innerHTML = ListNiveauCycle[i].libelleNiveau;
		                        opt1.value = ListNiveauCycle[i].idNiveau;
		                        $niveauSelect.append(opt1);
		                        }
		                    }
	}
	
	$("#cycles").change(function(){
		remplirListNiveau(this.value)
	});
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
                          <label class="col-sm-3 col-form-label">Cycle</label>
                          <div class="col-sm-9">
                            <select class="form-control" id="cycles" required="">
                              <option value="">-----------</option>
    						  <option value="1">Cycle1</option>
    						  <option value="24">Cycle2</option>
                            </select>
                          </div>
                        </div>
         
         <div class="col-md-4">
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">Niveau</label>
                          <div class="col-sm-9">
                            <select id="niveau" class="form-control" required="" name="niveau.id">
                            </select>
                          </div>
                        </div>
                      </div>
0
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>
-1