根據值jquery過濾選擇框

Question

我有三級選擇框，我希望當用戶選擇第一個選擇時，第二個選擇僅顯示與第一個選擇有關的數據，而當用戶選擇第二個選擇時，最后一個選擇框僅顯示與第二個選擇有關的數據。

 $("#select1").change(function() { if ($(this).data('options') == undefined) { $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="region"> <option value="1">Region 1</option> <option value="2">Region 2</option> <option value="3">Region 3</option> </select> <select id="City"> <option value="1">City1</option> <option value="1">City1</option> <option value="1">City1</option> <option value="2">City2</option> <option value="2">City2</option> <option value="3">City3</option> <option value="2">City2</option> <option value="3">City3</option> <option value="1">City1</option> </select> <select id="barangay"> <option value="city1">barangay1</option> <option value="city2">barangay1city2</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> </select> 

它的工作原理是這樣，但這只是選擇框過濾器的兩個級別

老實說，我對jquery及其工作原理只有非常基本的了解。 希望有人以正確的方式指導我。

Answer 1

這可能對您有幫助。

<select id="region">
  <option value="" selected>Select region</option>
  <option value="1">Region 1</option>
  <option value="2">Region 2</option>
  <option value="3">Region 3</option>
</select>

<select id="City">
  <option value="">Select City</option>
  <option value="1">City1</option>
  <option value="1">City1</option>
  <option value="1">City1</option>
  <option value="2">City2</option>
  <option value="2">City2</option>
  <option value="3">City3</option>
  <option value="2">City2</option>
  <option value="3">City3</option>
  <option value="1">City1</option>
</select>

<select id="barangay">
  <option value="">Select barangay</option>
  <option value="city1">barangay1</option>
  <option value="city2">barangay1city2</option>
  <option value="city3">barangay1city3</option>
  <option value="city3">barangay1city3</option>
  <option value="city3">barangay1city3</option>
  <option value="city1">barangay1city1</option>
  <option value="city1">barangay1city1</option>
  <option value="city1">barangay1city1</option>
  <option value="city1">barangay1city1</option>
</select>

腳本

$("#region").change(function(){
    var val=$(this).val();
    $("#City option").hide();
  $("#City").val("");
    $("#City option[value='"+val+"']").show();
  $("#City").change();
});

$("#City").change(function(){
    var val=$(this).val();
    $("#barangay option").hide();
  $("#barangay").val("");
    $("#barangay option[value='city"+val+"']").show();
});

https://jsfiddle.net/c47so2jq/

Answer 2

將change偵聽器添加到前兩個select元素，然后遍歷下一個select每個option並決定是否顯示它。 在示例中，我為此使用了hidden屬性/屬性。

與往常一樣，無需任何外部庫（如jQuery）的幫助，這很容易做到。

在這里，您可以使用普通的Javascript（ES6）：

 region.addEventListener('change', ({target: el}) => { [...city.options].forEach((option) => { option.hidden = !(option.value === el.value) && !option.disabled; }) }) city.addEventListener('change', ({target: el}) => { [...barangay.options].forEach((option) => { option.hidden = !(option.value === `city${el.value}`) && !option.disabled; }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="region"> <option disabled selected>Pick a region</option> <option value="1">Region 1</option> <option value="2">Region 2</option> <option value="3">Region 3</option> </select> <select id="city"> <option disabled selected>Pick a city</option> <option value="1">City1</option> <option value="1">City1</option> <option value="1">City1</option> <option value="2">City2</option> <option value="2">City2</option> <option value="3">City3</option> <option value="2">City2</option> <option value="3">City3</option> <option value="1">City1</option> </select> <select id="barangay"> <option disabled selected>Pick a barangay</option> <option value="city1">barangay1</option> <option value="city2">barangay1city2</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> </select> 

如果您還需要在更改區域后重置已經選擇的城市的值，請執行以下操作：

 region.addEventListener('change', ({target: el}) => { [...city.options].forEach((option) => { option.hidden = !(option.value === el.value) && !option.disabled; }) city.value = 'default'; barangay.value = 'default'; }) city.addEventListener('change', ({target: el}) => { [...barangay.options].forEach((option) => { option.hidden = !(option.value === `city${el.value}`) && !option.disabled; }) barangay.value = 'default'; }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="region"> <option disabled selected value="default">Pick a region</option> <option value="1">Region 1</option> <option value="2">Region 2</option> <option value="3">Region 3</option> </select> <select id="city"> <option disabled selected value="default">Pick a city</option> <option value="1">City1</option> <option value="1">City1</option> <option value="1">City1</option> <option value="2">City2</option> <option value="2">City2</option> <option value="3">City3</option> <option value="2">City2</option> <option value="3">City3</option> <option value="1">City1</option> </select> <select id="barangay"> <option disabled selected value="default">Pick a barangay</option> <option value="city1">barangay1</option> <option value="city2">barangay1city2</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> </select> 

Answer 3

你是要工作嗎

  $("#region").change(function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#City option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#City').html(options); }); $("#City").change(function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#barangay option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=city' + id + ']'); $('#barangay').html(options); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="region"> <option value="1">Region 1</option> <option value="2">Region 2</option> <option value="3">Region 3</option> </select> <select id="City"> <option value="1">City1</option> <option value="1">City1</option> <option value="1">City1</option> <option value="2">City2</option> <option value="2">City2</option> <option value="3">City3</option> <option value="2">City2</option> <option value="3">City3</option> <option value="1">City1</option> </select> <select id="barangay"> <option value="city1">barangay1</option> <option value="city2">barangay1city2</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city3">barangay1city3</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> <option value="city1">barangay1city1</option> </select> 

Answer 4

閱讀我的評論，然后：

 //<![CDATA[ /* js/external.js */ var doc, bod, M, T, I, S, Q, aC, rC; // for use on other loads addEventListener('load', function(){ doc = document; bod = doc.body; M = function(tag){ return doc.createElement(tag); } T = function(tag){ return doc.getElementsByTagName(tag); } I = function(id){ return doc.getElementById(id); } S = function(selector, within){ var w = within || doc; return w.querySelector(selector); } Q = function(selector, within){ var w = within || doc; return w.querySelectorAll(selector); } aC = function(element, className){ var s = element.className.split(/\\s+/), n = s.indexOf(className); if(n === -1){ s.push(className); element.className = s.join(' ').trim(); } return function(className, text){ return aC(element, className, text); } } rC = function(element, className){ var s = element.className.split(/\\s+/), n = s.indexOf(className); if(n !== -1){ s.splice(n, 1); element.className = s.join(' ').trim(); } return function(className, text){ return rC(element, className, text); } } var cities = Q('.city'), hoods = Q('.neighborhood'); function hideHoods(){ for(var i=0,l=hoods.length; i<l; i++){ aC(hoods[i], 'hide') } } I('region').onchange = function(){ for(var i=0,d,l=cities.length; i<l; i++){ aC(cities[i], 'hide') } d = cities[this.selectedIndex]; rC(d, 'hide'); hideHoods(); rC(I(d.value), 'hide'); } for(var i=0,d,l=cities.length; i<l; i++){ d = cities[i]; d.onchange = function(){ hideHoods(); rC(I(this.value), 'hide'); } } }); // end load //]]> 

 /* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; } html,body{ width:100%; height:100%; } body{ background:#ccc; } #content{ padding:7px; } label{ display:inline-block; margin-bottom:3px; } select{ width:100%; padding:3px 5px; margin-bottom:5px; } .hide{ display:none; } 

 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' /> <title>Test Template</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script type='text/javascript' src='js/external.js'></script> </head> <body> <div id='content'> <label>Region</label> <select id='region'> <option value='east' selected='selected'>east</option> <option value='central'>central</option> <option value='west'>west</option> </select> <label>City</label> <select id='east' class='city'> <option value='Boston' selected='selected'>Boston</option> <option value='NY'>New York</option> <option value='Philadelphia'>Philadelphia</option> </select> <select id='central' class='hide city'> <option value='Minneapolis' selected='selected'>Minneapolis</option> <option value='Milwaukee'>Milwaukee</option> <option value='Chicago'>Chicago</option> </select> <select id='west' class='hide city'> <option value='Seattle' selected='selected'>Seattle</option> <option value='Portland'>Portland</option> <option value='SanFran'>San Francisco</option> </select> <label>Neighborhood</label> <select id='Boston' class='neighborhood'> <option value='Allston' selected='selected'>Allston</option> <option value='Back Bay'>Back Bay</option> <option value='Bay Village'>Bay Village</option> </select> <select id='NY' class='hide neighborhood'> <option value='Harlem' selected='selected'>Harlem</option> <option value='SoHo'>SoHo</option> <option value='Lower East Side'>Lower East Side</option> </select> <select id='Philadelphia' class='hide neighborhood'> <option value='French Quarter' selected='selected'>French Quarter</option> <option value='Logan Square'>Logan Square</option> <option value='Old City'>Old City</option> </select> <select id='Minneapolis' class='hide neighborhood'> <option value='Downtown West' selected='selected'>Downtown West</option> <option value='Howe'>Howe</option> <option value='Hawthorne'>Hawthorne</option> </select> <select id='Milwaukee' class='hide neighborhood'> <option value='Riverwest' selected='selected'>Riverwest</option> <option value='East Town'>East Town</option> <option value='Historic Third Ward'>Historic Third Ward</option> </select> <select id='Chicago' class='hide neighborhood'> <option value='Lincoln Park' selected='selected'>Lincoln Park</option> <option value='Wicker Park'>Wicker Park</option> <option value='Edgewater'>EdgeWater</option> </select> <select id='Seattle' class='hide neighborhood'> <option value='Greenwood' selected='selected'>Greenwood</option> <option value='Wallingford'>Wallingford</option> <option value='Fremont'>Fremont</option> </select> <select id='Portland' class='hide neighborhood'> <option value='Mount Tabor' selected='selected'>Mount Tabor</option> <option value='Downtown'>Downtown</option> <option value='Goose Hollow'>Goose Hollow</option> </select> <select id='SanFran' class='hide neighborhood'> <option value='Haight-Ashbury' selected='selected'>Haight-Ashbury</option> <option value='Chinatown'>Downtown</option> <option value='Mission Bay'>Mission Bay</option> </select> </div> </body> </html> 

這只是顯示簡單的技術。 實際上，我實際上會創建完全可擴展的面向對象的代碼。