Question

用jquery选择框显示/隐藏div。这工作但是当返回/单击以清空选项值（Choose Color）时，jquery不会隐藏最后一个div。

JS：

 $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").hide();
                    $(".red").show();
                }
                if($(this).attr("value")=="green"){
                    $(".box").hide();
                    $(".green").show();
                }
                if($(this).attr("value")=="blue"){
                    $(".box").hide();
                    $(".blue").show();
                }
            });
        }).change();
    });

HTML：

<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</div>
<div class="red box" >You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

CSS：

 .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }

如何解决这个问题？

DEMO：http://jsfiddle.net/9yR4f/

Answer 1

我会将整件事减少到：

$("select").change(function () {
$('div.box').hide();
    $('div.box.'+$(this).val()).show();
});

<强> jsFiddle example

Answer 2

您没有添加默认代码！将属性添加到第一个选项：

<option value="default">Choose Color</option>

现在为Javascript添加一个子句，当它被选中时，它会全部消失：

if ($(this).attr("value") == "default"){
    $(".box").hide();
}

修正小提琴：http://jsfiddle.net/9yR4f/4/

Answer 3

许多不同的方法......

试试这个：

为“选择颜色”选项提供值。例如：value="none"。

<option value="none">Choose Color</option>

在脚本中添加：

if($(this).attr("value")=="none"){
    $(".box").hide();
}

<强> JSFiddle Demo

Answer 4

改变你的逻辑：

 $(document).ready(function(){
    $("select").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="red"){
                $(".box").hide();
                $(".red").show();
            }
            else if($(this).attr("value")=="green"){
                $(".box").hide();
                $(".green").show();
            }
            else if($(this).attr("value")=="blue"){
                $(".box").hide();
                $(".blue").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

Answer 5

为“选择颜色”项添加一个值（即：无）并在if / then块中添加一个条目

<script src=jquery.js></script>
<script>


$(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").hide();
                    $(".red").show();
                }
                if($(this).attr("value")=="green"){
                    $(".box").hide();
                    $(".green").show();
                }
                if($(this).attr("value")=="blue"){
                    $(".box").hide();
                    $(".blue").show();
                }
                if($(this).attr("value")=="none")
                {
                    $(".box").hide();

                }
            });
        }).change();
    });
</script>
    <div>
    <select>
        <option value="none">Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
</div>
<div class="red box" >You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

jQuery选择框显示/隐藏div

5 个答案: