时间戳

首页 > 解决方案 > 如何根据下拉选项列表中的选定值过滤 div？

javascript - 如何根据下拉选项列表中的选定值过滤 div？

问题描述

我有多个 div 第一次它会显示所有内容，但是当我从下拉选项中更改值时，所有 div 都应该被隐藏，并且根据选定的值应该只显示一个 div。

它像我一样适用于一个选项，panel-1但现在我想它应该适用于所有选项列表我该怎么做？

$('#medicalHistoryFilter').on('change', function() {
  var selectedFitler = $(this).find(':selected').val();

  if (selectedFitler == 'panel-1') {
    $('#accordion').find('.panel').hide();
    $('#accordion').find('#panel-1').parents('.panel').show();
  } else {
    $('#accordion').find('.panel').show();
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <select class="form-control" id="medicalHistoryFilter">
    <option>Filter</option>
    <option value="panel-1">panel-1</option>
    <option value="panel-2">panel-2</option>
    <option value="panel-3">panel-3</option>
    <option value="panel-4">panel-4</option>
    <option value="panel-5">panel-5</option>
  </select>

  <div class="clearfix"></div><br>
  <div class="panel-group" id="accordion">

    <div class="panel panel-default">
      <div id="panel-1">This is panel 1</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-2">This is panel 2</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-3">This is panel 3</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-4">This is panel 4</div>
    </div>

    <div class="panel panel-default">
      <div id="panel-5">This is panel 5</div>
    </div>

  </div>
</div>

选项列表可能是多的，没有限制，所以我们不能用 if else 条件来做。

标签： javascriptjqueryhtmlcss

解决方案

您可以使用 选择正确的面板$('#'+selectedFitler)。

PS：我还稍微编辑了您的代码：

要获得您的<select>价值，只需使用$(this).val().
无需使用.find()方法，您只需使用 . 选择所有面板即可$('#accordion .panel')。

$('#medicalHistoryFilter').on('change', function() {
  let selectedFitler = $(this).val();
  if (selectedFitler.startsWith('panel-')) {
    $('#accordion .panel').hide();
    $('#' + selectedFitler).parent().show();
  } else {
    $('#accordion .panel').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="medicalHistoryFilter">
  <option>Filter</option>
  <option value="panel-1">panel-1</option>
  <option value="panel-2">panel-2</option>
  <option value="panel-3">panel-3</option>
  <option value="panel-4">panel-4</option>
  <option value="panel-5">panel-5</option>
</select>

<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div id="panel-1">This is panel 1</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-2">This is panel 2</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-3">This is panel 3</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-4">This is panel 4</div>
  </div>

  <div class="panel panel-default">
    <div id="panel-5">This is panel 5</div>
  </div>
</div>

推荐阅读