如果選擇了所有多個選項，則顯示一個div

如果選擇選項或選擇某個選擇，我會看到很多關於如何顯示div的問題和解答，但我無法弄清楚如何製作div顯示多個選擇是否改變。如果選擇了所有多個選項，則顯示一個div

我有三個選擇框，每個都設置爲默認值。我需要做的是如果所有三個都改變了，然後顯示一個div。

<select id="select1" class="select"> 
<option selected="selected" class="default_selected" disabled>Thing</option> 
<option id="a" value="1">option one</option> 
<option id="b" value="2">option two</option> 
<option id="c" value="3">option three</option> 
</select> 

<select id="select2" class="select"> 
<option selected="selected" class="default_selected" disabled>Thing</option> 
<option id="a" value="1">option one</option> 
<option id="b" value="2">option two</option> 
<option id="c" value="3">option three</option> 
</select> 

<select id="select3" class="select"> 
<option selected="selected" class="default_selected" disabled>Thing</option> 
<option id="a" value="1">option one</option> 
<option id="b" value="2">option two</option> 
<option id="c" value="3">option three</option> 
</select> 

<div class="hidden">show if all three selects are changed to something.</div>

我已經試過：

 $('.select').on('change',function(){ 
      if($('.select').find(":selected").attr('class')=='default_select'){ 
       alert('test'); 
      } 
      else{ 
       $('.hidden').removeClass('hidden').show(); 
      } 
     });

來源

2013-10-28 David

您可以嘗試在change事件中使用addClass添加一個班級，然後檢查它發生變化的元素數量是否與總數相同。

HTML：

<select id="select1" class="selection"> 
    <option selected="selected" class="default_selected" disabled>Thing</option> 
    <option id="a" value="1">option one</option> 
    <option id="b" value="2">option two</option> 
    <option id="c" value="3">option three</option> 
</select> 
<select id="select2" class="selection"> 
    <option selected="selected" class="default_selected" disabled>Thing</option> 
    <option id="a" value="1">option one</option> 
    <option id="b" value="2">option two</option> 
    <option id="c" value="3">option three</option> 
</select> 
<select id="select3" class="selection"> 
    <option selected="selected" class="default_selected" disabled>Thing</option> 
    <option id="a" value="1">option one</option> 
    <option id="b" value="2">option two</option> 
    <option id="c" value="3">option three</option> 
</select> 
<div class="hidden">show if all three selects are changed to something.</div>

的jQuery：

$(document).ready(function() { 
    $(".selection").change(function() { 
     $(this).addClass("changed"); 
     if ($(".selection").length === $(".changed").length) { 
      $(".hidden").show(); 
     } 
    }); 
});

演示：http://jsfiddle.net/IrvinDominin/tQu2b/

來源

2013-10-28 16:47:53

簡單易讀！ –

太棒了！這工作完美。這很簡單，而且容易理解。謝謝Irvin。 – David

@大衛很高興幫助你 –

可能是這樣來幫你

$(".default_selected").change(function() { 
if($('select[.default_selected]').text()!="Thing") 
     { 
     $("div[.hidden]").show(); 
     } 
});

來源

2013-10-28 16:42:39

DEMO

$(document).ready(function() { 
    $('.hidden').hide(); 
    $('select[id^="select"]').change(function() { 
     var len = $('select[id^="select"] option:selected').filter(function() { 
      return this.value != 'Thing'; 
     }).length; 
     if(len == 3){ 
      $('.hidden').show(); 
     } 
    }); 
});

Refrences

^ attribute starts with selector

.filter()

來源

2013-10-28 16:44:11

-1

只是檢查是否值與option:selected值進行比較。

來源

2013-10-28 16:44:21 Thew

-1這個可以解釋爲什麼？ – Thew

var $selects= $('select').each(function(){ 
    /* store original value */ 
    $(this).data('orig', this.value); 
}).change(function(){ 
    /* filter out changed selects and get qty*/ 
    var numChanged= $selects.filter(function(){ 
     return $(this).data('orig') != this.value; 
    }).length; 
     $('.hidden')[ numChanged == 3 ? 'show' : 'hide']();  
});

DEMO

來源

2013-10-28 16:52:38 charlietfl

如果選擇了所有多個選項，則顯示一個div

回答

相關問題