使用 select 个选项值过滤

Question

我有一个类别下拉列表和多个名称为 class 的 div，我希望当用户从下拉列表中选择和选项时根据所选选项过滤 div，例如我有一个名为的类别当用户选择化妆时，我只想显示带有 class 化妆的 div，这是我尝试过的：

$('#categories').change(function() {
  var val = $(this).val();
  if (val == "makeup") {
    $('.makeup').fadeIn();
  } else {
    $(".makeup").not('.' + value).fadeOut();
    $('.makeup').filter('.' + value).fadeIn();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="makeup">
  Div 1
</div>
<div class="makeup">
  Div 2
</div>
<div class="makeup">
  Div 3
</div>
<div class="other">
  Div 4
</div>

Answer 1

在所有 div 上放置一个公共 class "category"。
将更改处理程序绑定到 select
当它改变时，淡出所有选项，并淡入与值匹配的选项作为 class

$('#categories').on('change', function(e) {
  $('.category')
    .fadeOut()
    .filter('.'+ e.target.value)
    .fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="category makeup">
  Div 1
</div>
<div class="category makeup">
  Div 2
</div>
<div class="category makeup">
  Div 3
</div>
<div class="category other">
  Div 4
</div>

Answer 2

此代码按要求工作，我刚刚将 class .category-option 添加到您要淡入和淡出的元素中。

演示

$('#categories').change(function() {

  // Get value of selected option
  var val = $(this).children("option:selected").val();

  // Fadeout all that are not linked
  $(".category-option").fadeOut();

  // Fade in appropriate options
  $(".category-option." + val).fadeIn();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="categories">
  <option selected disabled>Choose category</option>
  <option value="makeup">Make-up</option>
  <option value="cafes">Cafes</option>
  <option value="other">Other</option>
</select>

<div class="category-option makeup">
  Div 1
</div>
<div class="category-option makeup">
  Div 2
</div>
<div class="category-option makeup">
  Div 3
</div>
<div class="category-option other">
  Div 4
</div>

使用 select 个选项值过滤

Filter with select options values

javascript

jquery

onchange

filter

演示