jquery - 複数のオプションがすべて選択されている場合は div を表示する

Question

選択オプションが選択された場合、または特定の選択が選択された場合に div を表示する方法について多くの質問と回答が表示されますが、複数の選択が変更された場合に div を表示する方法がわかりません。

3 つの選択ボックスがあり、それぞれがデフォルトに設定されています。私がする必要があるのは、3 つすべてが変更されている場合は、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();  
            }
        }); 

Answer 1

イベントで使用するクラスを追加してみて、addClass 変更changeされた要素の数が合計と同じであることを確認してください。

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/

Answer 2

デモ

$(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();
        }
    });
});

参考文献

^ セレクターで始まる属性

。フィルター（）

Answer 3

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

Answer 4

値が値と比較されるかどうかを確認するだけoption:selectedです。