如果选择了所有多个选项，则显示一个div

Question

如果选择了选择选项或选择了某个选择，我会看到很多关于如何显示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();  
            }
        }); 

Answer 1

您可以尝试在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/

Answer 2

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

^属性以选择器开头

。过滤（）

Answer 3

可能会对您有帮助

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

Answer 4

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 5

只需检查这些值是否与option:selected value比较即可。