[JQUERY] jQuery로 계단식 드롭 다운을 채우는 방법
JQUERYjQuery로 계단식 드롭 다운을 채우는 방법
해결법
-
1.그것은해야으로 간단하게
그것은해야으로 간단하게
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) }); });데모 : 바이올린
-
2.이 게시물은 'JQuery와 캐스케이드 선택'에 대한 Google 검색에서 여전히 같은 두 번째 솔루션을 제공하겠습니다. 이 첫 번째 선택입니다 :
이 게시물은 'JQuery와 캐스케이드 선택'에 대한 Google 검색에서 여전히 같은 두 번째 솔루션을 제공하겠습니다. 이 첫 번째 선택입니다 :
<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> -
3.나는 국가, 주, 도시 및 우편 번호에 대한 드롭 다운 계단식 만든
나는 국가, 주, 도시 및 우편 번호에 대한 드롭 다운 계단식 만든
그것은 누군가에게 도움이 할 수있다. 코드 여기에 일부 부분은 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); } }바이올린 데모
-
4.
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> -
5.이것은 내가했던 것이 한 예이다. 나는 당신을 위해 도움이 될 것입니다 바랍니다.
이것은 내가했던 것이 한 예이다. 나는 당신을 위해 도움이 될 것입니다 바랍니다.
$ (문서) .ready (함수 () { VAR ListNiveauCycle = [{ "idNiveau"1 "libelleNiveau" "CL1", "idCycle"1}, { "idNiveau"26 "libelleNiveau": "레벨 22", "idCycle": 24}, { "idNiveau"34 "libelleNiveau": "CL3", "idCycle"1}, { "idNiveau"35 "libelleNiveau": "DAlf3", "idCycle"1}]; CONSOLE.LOG (ListNiveauCycle); 함수 remplirListNiveau (idCycle) { CONSOLE.LOG ( 'remplirListNiveau'); VAR $ niveauSelect = $ ( "# 수준"); // 빈리스트 NiveauSelect.empty ()를 $; 경우 (나는