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

Question

我有多个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>

​

选项列表可能是多的，没有限制，所以我们不能做如果其他条件。

Answer 1

您可以使用$('#'+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>

​