Question

我有2个下拉列表，他们分别过滤内容。如果所选选项位于div中，则显示div。

如何使用它们一起过滤内容？我想要的就是让这两个下拉列表一起工作。他们目前正在过滤内容。因此，如果下拉列表1单独过滤内容ABCDE，下拉列表2过滤内容DEG，如果两者都被选中，则显示的内容应为DE

$(document).ready(function(){
  $('#level').on('change', function() {
    var val = $(this).val();
    if ( val == '00'){
      $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });

  $('#type').on('change', function() {
    var val = $(this).val();
    if ( val == '000'){
      $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
});

div {
  border: 1px solid black;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<select id="level">
  <option value="00" selected><b>Default</b></option>
  <option value="Primary">Primary</option>
  <option value="Secondary">Secondary</option>
  <option value="Primary and Secondary">Primary and Secondary</option>
</select>

<select id="type">
  <option value="000" selected><b>Default</b></option>
  <option value="King">King</option>
  <option value="Queen">Queen</option>
</select>

<div class="textIc">
  <p>Primary</p>
  <p>King</p>
</div>

<div class="textIc">
  <p>Secondary</p>
</div>

<div class="textIc">
  <p>Primary and Secondary</p>
  <p>King</p>
  <p>bla bla bla bla</p>
</div>

<div class="textIc">
  <p>Primary</p>
  <p>Queen</p>
</div>


<div class="textIc">
    <p>Secondary</p>
</div>

<div class="textIc">
    <p>Primary and Secondary</p>
    <p>King</p>
    <p>bla bla bla bla</p>
</div>

Here是小提琴。

Answer 1

以下是考虑这两个下拉列表的代码。

$(document).ready(function(){
  $('#level').on('change', function() {
    var val = $(this).val();
    var typeVal = $('#type').val();
    if ( val == '00'){
    if(typeVal == '000'){
        $(".textIc").show();
    }else{
      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(typeVal)!==-1){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
     }
    }else{

      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1 && (typeVal=='000' || $(this).children("p").text().indexOf(typeVal)!==-1)){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
});

$(document).ready(function(){
  $('#type').on('change', function() {
    var val = $(this).val();
    var levelVal = $('#level').val();
    if ( val == '000'){
        if(levelVal == '00'){
            $(".textIc").show();
      }else{
        $('.textIc').each(function(){
          if($(this).children("p").text().indexOf(levelVal)!==-1){
            $(this).show();
          }else{
            $(this).hide();
          }
        });
       }
    }else{

      $('.textIc').each(function(){
        if($(this).children("p").text().indexOf(val) !==-1 && (levelVal=='00' || $(this).children("p").text().indexOf(levelVal)!==-1)){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
});

这是fiddle for testing.

基本理念：
检查每个下拉列表的change事件中的下拉值。

注意：可以重构上面的代码以减少if语句的数量。使用.each()循环遍历每个元素可以移出到单独的function()。

通过多个下拉列表过滤内容

1 个答案: