jQuery 选择框显示/隐藏 div答案

【问题标题】：jQuery select box Show/hide divjQuery 选择框显示/隐藏 div
【发布时间】：2014-07-28 21:02:31
【问题描述】：

我使用 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; }

如何解决这个问题？

演示：http://jsfiddle.net/9yR4f/

【问题讨论】：

那是因为你没有隐藏它的代码...
@Shahar：在 Q 中添加 css 更新。

标签： javascript jquery html css

【解决方案1】：

我会将整个事情简化为：

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

jsFiddle example

【讨论】：

+1 表示思考整个过程，而不是像其他答案那样填补漏洞......
@j08691:+1 很好但是在我的代码中，如果我在默认选项中添加selected，则 jQuery 显示 div 选项。如何为这样选择的默认选项工作代码：<option value="red" selected>Red</option>
@j08691：请查看我的完整代码：http://jsfiddle.net/Tdafh/6/ 1 - 我使用 jquery 选择框插件验证选择框。当您提交没有值的表单时（即：从选择框中删除红色），如果您单击选择框外部红色错误切换到绿色错误，您会看到红色错误。我认为 `change();与第 59 行冲突。 2 - 如果从选项 select2 中删除选择不起作用且未设置样式选项。

【解决方案2】：

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

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

现在对于 Javascript，在选中时添加一个子句以使其全部消失：

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

固定小提琴：http://jsfiddle.net/9yR4f/4/

【讨论】：

【解决方案3】：

许多不同的方法可以做到这一点......

试试这个：

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

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

在你的脚本中添加这个：

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

JSFiddle Demo

【讨论】：

【解决方案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();
});

【讨论】：

【解决方案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>

【讨论】：