Question

我正在尝试使用另一个选择框中选择的选项过滤一个选择框的内容。这是我的代码：

 //filter content according to the selected option on a select box on a
 //page  
 //Get the value of the option selectd in region box    
 var $selectedRegion = $('#region');

  // fire function when region value changed 
 $selectedRegion.change(function(){

  //cycle through each element of data and get its value  

  $('select#data').find('option').each(function() {

  //Get the value of the option selected in data box

  var $item = $(this).val();

      //check if the value of data and region is same. If not hide the data name                    

 if($selectedRegion.val() !== $item ) {
       $(this).wrap('<span>').hide();    }
     });    });'

HTML：

 <div class="inline-select-boxes">
   <label for="data" class="inline-block"><legend><span class="number">1</span> Select Region</legend></label>
    <select id="region" name="region" class="padded region">
      <option value="select-one" id="select-one">Select one</option>
        <option value="north" id="north">North</option>
        <option value="south">South </option>
        <option value="east">East</option>
        <option value="west">West</option>

     </select>
   </div>

   <div class="inline-select-boxes">
   <label for="data" class="inline-block"><legend><span class="number">2</span> Select item</legend></label>
    <select id="data" name="data" class="padded ">
        <option value="select one">Select one</option>
        <option value="north">i1</option>
        <option value="north">i2 </option>
        <option value="south">i3 </option>
        <option value="east">i4 </option>
     </select>

然而，这仅适用一次。对于前者如果我从第一个框中选择向北，则第二个框显示“i1”和“i2”并隐藏其余部分。但是当我选择第二个选项（例如南方）时，相关选项（'i3'）不会出现。他们仍然隐藏着。如何重置第二个框的内容，以便选择第二个框时的相关内容也会出现。

Answer 1

另一种方法是从标记中取出绑定并创建要在脚本中显示的内容的地图。请考虑以下代码段;

＆＃13;

(function () {
  var CLASSES = {
    region    : '.select__region',
    data      : '.select__data'
  },
    map = {
      NORTH: [
        'i1',
        'i2'
      ],
      SOUTH: [
        'i3'
      ],
      EAST: [
        'i4'
      ],
      WEST: [
        
      ]
    },
    regionSelect = document.querySelector(CLASSES.region),
    dataSelect     = document.querySelector(CLASSES.data),
    filterData = function(val) {
      var opts = dataSelect.options,
        allowedOpts = map[val];
      dataSelect.value = allowedOpts[0];
      for(var i = 0; i < opts.length; i++) {
        if (allowedOpts.indexOf(opts[i].value) === -1) {
          opts[i].hidden = true;
        } else {
          opts[i].hidden = false;
        }     
      }
    };


  filterData(regionSelect.value);

  regionSelect.addEventListener('change', function(e) {
    filterData(this.value);
  });

}());

＆＃13;

<!DOCTYPE html>
<head></head>
<body>
  <select id="region" class="select__region">
    <option value="NORTH">North</option>
    <option value="SOUTH">South</option>
    <option value="EAST">East</option>
    <option value="WEST">West</option>
  </select>
  <select id="data" class="select__data">
    <option value="i1">i1</option>
    <option value="i2">i2</option>
    <option value="i3">i3</option>
    <option value="i4">i4</option>
  </select>
</body>

＆＃13;

这将执行您的预期，但没有耦合的选择标记。您还可以在jsBin here中看到此内容。

或者，使用这样的原始样式标记（也可在jsBin上获得）;

＆＃13;

(function () {
  var CLASSES = {
    region    : '.select__region',
    data      : '.select__data'
  },
    regionSelect = document.querySelector(CLASSES.region),
    dataSelect     = document.querySelector(CLASSES.data),
    filterData = function(val) {
      var opts = dataSelect.options;
      dataSelect.value = val;
      for(var i = 0; i < opts.length; i++) {
        if (opts[i].value === val) {
          opts[i].hidden = false;
        } else {
          opts[i].hidden = true;
        }     
      }
    };


  filterData(regionSelect.value);

  regionSelect.addEventListener('change', function(e) {
    filterData(this.value);
  });
  
  dataSelect.addEventListener('change', function(e) {
    console.log(this.value);
  });

}());

＆＃13;

<!DOCTYPE html>
<head></head>
<body>
  <select id="region" class="select__region">
    <option value="NORTH">North</option>
    <option value="SOUTH">South</option>
    <option value="EAST">East</option>
    <option value="WEST">West</option>
  </select>
  <select id="data" class="select__data">
    <option value="NORTH">i1</option>
    <option value="NORTH">i2</option>
    <option value="SOUTH">i3</option>
    <option value="EAST">i4</option>
  </select>
</body>

＆＃13;

然而，后一种解决方案使得为数据选择提取所选值变得不太方便，因此地图解决方案会让你更容易相信。

希望能帮到你！

Answer 2

用这个替换你的JS。它会对你有用。感谢

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

您可以在此处查看输出https://jsfiddle.net/prakashlaxkar/bv5jfr8n/

使用jquery过滤选择框内容

2 个答案: