使用选择选项值过滤

Question

我有一个类别下拉列表和具有类名称的多个div，我希望当用户选择时，从下拉列表中选择并根据所选选项过滤div，例如，当用户选择该类别时，我有一个名为makeup的类别我只想显示带有类组成的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上放置一个通用类“类别”。
• 将更改处理程序绑定到选择
• 当其更改时，淡出所有选项，并淡入那些与该值匹配的类

lipo

$lipo -extract 'arm' 'MyFramework.framework/MyFramework' -output 'MyFramework-arm'
$lipo -extract 'arm64' 'MyFramework.framework/MyFramework' -output 'MyFramework-arm64'
$lipo -create -output 'MyFramework' 'MyFramework-arm' 'MyFramework-arm64'

Answer 2

此代码按要求工作，我刚刚将类.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>