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

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

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

参考

^ attribute starts with selector

.filter()

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值进行比较。

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

5 个答案: