如何根據下拉選擇值隱藏div

我想隱藏某些div，具體取決於用戶在我的索引上搜索的類別。例如，用戶選擇「自行車」作爲類別，某些div（包含過濾器）將被隱藏。我一直在努力讓JQuery工作，請參閱我創建的JSFiddle。任何幫助表示讚賞！在你的提琴如何根據下拉選擇值隱藏div

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

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

來源

2017-02-24 Ron

'$（this）.val（）'變複雜了，還是什麼？ – CBroe

[這裏是工作jQuery和console.log（selectedOption）]（https://jsfiddle.net/Lkt613yf/3/）撥弄 – caramba

selectOption selectOption –

我已經更新代碼以及

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') { 
 
    \t //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') { 
 
    \t //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>

來源

2017-02-24 12:17:18

謝謝，這個工程太棒了！ – Ron

<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/

來源

2017-02-24 12:29:50

如何根據下拉選擇值隱藏div

回答

相關問題