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>

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

1 个答案: