根據下拉選項顯示/隱藏

Question

我正在使用 Jquery 根據用戶在下拉列表中選擇的內容來顯示/隱藏 div。

我的 HTML：

<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show="blah">Should be shown when blah</div>
<div data-hide="example">Should be hidden when example</div>

我的Jquery（在coffeescript中）：

$("select").on "change", () ->
  shows = $('[data-show="' + $(this).val() + '"]')
  hides = $('[data-hides="' + $(this).val() + '"]')

  shows.show()
  hides.hides()

當用戶選擇正確的選項時，這會起作用，例如Example 。 但是當用戶返回說Test 時，它應該回到默認值。 我如何讓這個工作？

Answer 1

可以使用filter()設置最終顯示，並在過濾器之前對整個組進行相反的操作

 $("select").on("change", function(){ var value = this.value // hide all data-show $('[data-show]').hide().filter(function(){ return $(this).data('show') === value; }).show()// only show matching ones $('[data-hide]').show().filter(function(){ return $(this).data('hide') === value; }).hide() }).change()

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>

Answer 2

我不知道你在做什么，但這是所描述的行為，可能不是你想要的：D

 $('select').on('change', (e) => { // apply defaults, then filter // credits to filter @charlietfl $('[data-show]').hide().filter('[data-show=' + $(e.target).val() + ']').show(); $('[data-hide]').show().filter('[data-hide=' + $(e.target).val() + ']').hide(); }).change();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>

編輯添加默認隱藏/顯示

Answer 3

創建要顯示/隱藏的元素選擇：

var elements = $('[data-show], [data-hide]');

然后你可以使用 jQuery 的.filter函數來只顯示選中的元素：

 var elements = $('[data-show], [data-hide]'); function showElement(option) { var filter; // hide all elements befor filtering elements.hide(); // create the filter value, which will be used for filtering switch (option) { case 'test': filter = '[data-hide="example"]'; console.log('show only example'); break; case 'blah': filter = '*'; console.log('show all elements'); break; default: console.log('hide all elements (including example)'); break; } if (filter) { elements.filter(filter).show(); } } showElement('test'); $("select").on("change", function() { showElement($(this).val()); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>

你還有幾個錯別字：

• 當您通過data-hide選擇元素時，還有一個額外的s ( hides )：

   hides = $('[data-hides="' + $(this).val() + '"]')

• 當你想通過調用.hides()隱藏hides ，jQuery 只有一個.hide()函數來隱藏一個元素：

   hides.hides()

Answer 4

<select class="selectBoxClass">
    <option value='test'>Test</option>
    <option value='example'>Example</option>
    <option value='blah'>Blah</option>
</select>
<div data-show="blah" class="all ">Should be shown when blah</div>
<div data-hide="example" class="all">Should be hidden when example</div>

<script>
    $(document).on('change', '.selectBoxClass', function(event) {
        event.preventDefault();
        $('div.all').show();
        shows = $('[data-show="' + $(this).val() + '"]')
        hides = $('[data-hides="' + $(this).val() + '"]')
        shows.show()
        hides.hides()
    });

</script>

**如果你之前的代碼運行不好，那么你可以試試這個。

Answer 5

 $(function(){ $('div').hide(); $('select').change(function(){ if($(this).val()=='blah'){ $('div[data-show]').show(); $('div[data-hide]').hide(); }else if($(this).val()=='example'){ $('div[data-hide]').show(); $('div[data-show]').hide(); }else{ $('div[data-hide]').hide(); $('div[data-show]').hide(); } }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select> <option value='test'>Test</option> <option value='example'>Example</option> <option value='blah'>Blah</option> </select> <div data-show="blah">Should be shown when blah</div> <div data-hide="example">Should be hidden when example</div>

Answer 6

讓我們假設您假設一組 div，其中一些您希望根據您在 jQuery 中的下拉列表中選擇的內容來顯示/隱藏。

這就是它可以實現的方式。

網格

<div class="row exhbitors-grid-row">
                            
    <div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
        <div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class="member-avater">
                <img src="#" alt="">
            </div>
            <div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
                <div class="exhibitor-details">
                    <input type="hidden" name="industry" class="industry Accommodation" value="Accommodation">
                    <h4 class="grid-exhibitor-title">Tourist Board</h4>
                    <strong class="grid-exhibitor-copy">Manning the Booth</strong>
                    <div class="grid-item-host">
                        <span>User</span>
                        <a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
                
    <div class="col-lg-6 col-md-6 exhibitor-grid-item" style="">
        <div class="exhibitor-grid-large wow pixFadeRight" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class="member-avater">
                <img src="#" alt="">
            </div>
            <div class="listing-page-exhibitor-brief wow pixFadeUp" style="visibility: visible; animation-name: pixFadeUp;">
                <div class="exhibitor-details">
                    <input type="hidden" name="industry" class="industry Airline" value="Airline">
                    <h4 class="grid-exhibitor-title">Tourist Board</h4>
                    <strong class="grid-exhibitor-copy">Manning the Booth</strong>
                    <div class="grid-item-host">
                        <span>User</span>
                        <a href="bcard.pdf" target="_blank" title="Download business card"><i class="fa fa-address-card b-card-file" aria-hidden="true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    ...
    ...
    ...
    
</div>

在頁面的某處，您有一個如下所示的下拉列表：

<select class="category-select" name="category-select" id="category-select">
    <option value="-1">Industry </option>
    <option value="1">Accommodation</option>
    <option value="2">Airline</option>
    <option value="3">Car Rentals</option>
    <option value="4">City Tourist Board</option>
    ...
    ...
    ...
</select>

在更改此下拉列表時，我們只想顯示具有與所選下拉項相同的隱藏字段值的 div。 檢查 div 中上面的隱藏字段值。

我們需要一點點 jQuery 來實現這個魔法。 這是它的外觀：

$(document).ready(function(){
if($(".category-select")){
$(".category-select").change(function(){
    $(".exhibitor-grid-item").show();
    var selectedIndustry = $(".category-select option:selected").text();
    $(".exhibitor-grid-item").each(function(){
        var $itemIndustry = $(this).find(".industry").val();
        if($(".category-select option:selected").val() > -1){
          if(selectedIndustry != $itemIndustry){
            $(this).find(".industry").parent().parent().parent().parent().hide();
          }
        }
     });
   });
 }
});