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侦听器，然后遍历下一个option的每个select并决定是否显示。在示例中，我为此使用了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>

这仅显示了简单的技术。实际上，我实际上会创建完全可扩展的面向对象代码。

根据值jquery过滤选择框

4 个答案: