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

Question

我试图根据用户在我的索引上搜索的类别隐藏某些 div。例如，用户选择“自行车”作为类别，某些 div（包含过滤器）将被隐藏。我一直在努力让 JQuery 工作，请参阅我创建的 JSFiddle。任何帮助表示赞赏！

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

https://jsfiddle.net/Lkt613yf/1/

Answer 1

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

jQuery(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 = $(this).val();
    // Conditional if category equals bicycles.
    if (selectedOption == 'bicycles') {
    	//Hide Apartment Size, Room Size sliders
      $("#apartment-size-slider").hide();
      $("#room-size-slider").hide();
       $("#gear-type-dropdown").show();
    }  
    
    // Conditional if category equals entire home.
    if (selectedOption == 'entire-home') {
    	//Hide Gear Type dropdown
      $("#gear-type-dropdown").hide();
      $("#apartment-size-slider").show();
      $("#room-size-slider").show();
    } 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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 id="apartment-size-slider" class="facetwp-facet facetwp-facet-apartment_size_square_meters facetwp-type-slider">
    Apartment Size Slider
  </div>
  <div id="room-size-slider" 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 id="gear-type-dropdown" class="facetwp-dropdown">
        <option value>Gear Type</option>
        <option value="fixie">Fixie</option>
        <option value="geared">Geared</option>
      </select>
    </div>
  
  </div>
</div>

Answer 2

<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');
    } 
  });
});

https://jsfiddle.net/sgdmky4n/