Jquery 如何根据下拉选择值隐藏div

我试图根据用户在我的索引上搜索的类别来隐藏某些div。例如，用户选择“自行车”作为类别，某些div（包含过滤器）将被隐藏。我一直在努力让JQuery工作，请看我创建的JSFIDLE。感谢您的帮助

let selectedOption = $(this).find(':selected').prop('value');

---

我也在你的小提琴上更新了代码

jQuery（文档）.ready（函数（$）{
//应在下拉列表中发生更改时触发回调函数。
$（'.facetwp下拉列表'）。在（'change'，函数（e）上{
//应设置所选下拉选项的值。
var selectedOption=$（this.val（）；
//如果类别等于自行车，则为条件。
如果（选择选项==‘自行车’）{
//隐藏公寓大小、房间大小滑块
$（“#公寓大小滑块”）.hide（）；
$（“#房间大小滑块”）.hide（）；
$（“#齿轮类型下拉列表”）.show（）；
}  
//如果类别等于整个主目录，则为条件。
如果（selectedOption==“整个家庭”）{
//隐藏齿轮类型下拉列表
$（“#齿轮类型下拉列表”）.hide（）；
$（“#公寓大小滑块”）.show（）；
$（“#房间大小滑块”）.show（）；
} 
});
});

类别
选择一个类别
自行车（2）
整个家庭（1）
会议室（WG）（1）
公寓大小滑块
房间大小滑块
齿轮类型
修理工
齿轮传动

类别
选择一个类别
自行车（2）
整个家庭（1）
会议室（WG）（1）
公寓大小滑块
房间大小滑块
齿轮类型
修理工
齿轮传动
$（文档）.ready（函数（）{
//应在下拉列表中发生更改时触发回调函数。
$（'.facetwp下拉列表'）。在（'change'，函数（e）上{
//应设置所选下拉选项的值。
var selectedOption=$（'.facetwp下拉列表'）.val（）；
警报（选择选项）；
//如果类别等于自行车，则为条件。
如果（选择选项==‘自行车’）{
警报（“asd”）；
//隐藏公寓大小、房间大小滑块
}  
//如果类别等于整个主目录，则为条件。
如果（selectedOption==“整个家庭”）{
//隐藏齿轮类型下拉列表
警报（“asdasd”）；
} 
});
});

$（this）.val（）
要复杂还是什么？用selectedOption替换selectedOption
<div class="search_jobs">
  <div class="facetwp-facet facetwp-facet-categories facetwp-type-dropdown">
    <label class="facetwp-filter-title">Categories</label>
  </div>
  <div class="facet-wrapper">
    <select class="facetwp-dropdown">
      <option value>Select a Category</option>
      <option value="bicycles">Bicycles (2)</option>
      <option value="entire-home">Entire Home (1)</option>
      <option value="sublet-room-wg-in-berlin">Room (WG) (1)</option>
    </select>
  </div>

  <div class="facetwp-facet facetwp-facet-apartment_size_square_meters facetwp-type-slider">
    Apartment Size Slider
  </div>
  <div class="facetwp-facet facetwp-facet-room_size facetwp-type-slider">
    Room Size Slider
  </div>
  <div class="facetwp-facet facetwp-facet-gear facetwp-type-dropdown">
    <div class="facet-wrapper">
      <select class="facetwp-dropdown">
        <option value>Gear Type</option>
        <option value="fixie">Fixie</option>
        <option value="geared">Geared</option>
      </select>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

$(document).ready(function() {
  // Should trigger callback function on change in dropdown.
  $('.facetwp-dropdown').on('change', function(e) {

    // Should set the value of the selected dropdown option.
    var selectedOption = $('.facetwp-dropdown').val();
    alert(selectedOption);

    // Conditional if category equals bicycles.
    if (selectedOption == 'bicycles') {
    alert('asd');
        //Hide Apartment Size, Room Size sliders
    }  

    // Conditional if category equals entire home.
    if (selectedOption == 'entire-home') {
        //Hide Gear Type dropdown
      alert('asdasd');
    } 
  });
});