0

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

5 回答 5

4

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

于 2013-10-28T16:47:53.553 回答
1

演示

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

参考文献

^ 属性以选择器开头

。筛选（）

于 2013-10-28T16:44:11.607 回答
0 
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-28T16:52:38.717 回答
0

可能这会帮助你 

$( ".default_selected" ).change(function() {
if( $('select[.default_selected]').text()!="Thing")
        {
        $("div[.hidden]").show();
        }
});
于 2013-10-28T16:42:39.827 回答
-1

只需检查值是否与值进行比较option:selected。

于 2013-10-28T16:44:21.877 回答