根据选择下拉选择隐藏/显示 Div答案

【问题标题】：Hide/Show Div Based on Select Drop-Down Selections根据选择下拉选择隐藏/显示 Div
【发布时间】：2011-10-11 07:14:08
【问题描述】：

我正在开发一个 WP 主题选项面板，但这不是 WP 特定的。

我有两个链接选项：

选项 1 = 列选项 2 = 布局

选项一中的选择决定了选项二中显示的内容：

<!-- this controls the selection of columns -->
<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>


<!-- this controls the selection of columns -->

<!-- if '1 column' is selected this div is shown -->
<div id="layout_select1">
    You only have one column!
</div>

<!-- if '2 column' is selected this div is shown -->
<div id="layout_select2">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />col2
</div>

<!-- if '3 column' is selected this div is shown -->
<div id="layout_select3">
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />col1
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />col2
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />col2
</div>

我有一个 jQuery 可以完成我需要的大部分工作：

<script>
    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });
</script>

我现在面临的问题是在页面加载时显示所有 div。它们仅在用户切换选择菜单选项后才会隐藏。

如何在加载时隐藏正确的 div？

更新：我收到了一些回复，但我可能没有正确解释这一点。我不希望在加载页面时隐藏所有 div。我只想在加载时隐藏正确的 div。因此，例如，如果用户选择“2 列”，他会看到第二个 div。如果他明天或下个月在加载后回到选项面板，他仍然应该看到显示的第二个 div。 jQuery 必须在加载时检测当前选择的选项并显示适当的 div。

你可以在这里看到我的意思：http://jsfiddle.net/NickBe/RGXa7/3/

我对 javascript 和 jQuery 非常陌生，因此非常感谢任何帮助。谢谢大家！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要在 DOM 加载后隐藏。

<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $('#layout_select2, #layout_select3').hide();
    });

    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });

</script>

【讨论】：

#column_select 的选定值可能因不同请求而异。我认为您应该检查选定的值。如果您不关心所选值，则可以使用 css 隐藏其他 div。

【解决方案2】：

在document.ready()上触发选择更改功能

$(document).ready(function(){
   $("#column_select").trigger('change');
});

这将显示/隐藏适当的 div

【讨论】：

感谢您的简单解决方案！
随时:)。我也建议使用 Switch-case 语句

【解决方案3】：

<script>
    //you can initially hide your divs
    $("#layout_select1").hide();
    $("#layout_select2").hide();
    $("#layout_select3").hide();

    $("#column_select").change(function() {
        ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide();
        ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide();
        ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide();
    });
</script>

【讨论】：

【解决方案4】：

<script>
    $(function(){
        // This code block is called once the document has loaded in the browser.
        $( "#column_select" ).val( 'col1' ).trigger( 'change' ); // reset the value for Browsers caching Form Element States
        $( '#layout_select2, #layout_select3').hide();
    });

    $("#column_select").change(function() {
        $( '#layout_select1, #layout_select2, #layout_select3' ).hide();
        $( '#layout_select' + $( this ).val().charAt(3) ).show();
    }); 

</script>

【讨论】：

没有完全满足我的需要，但感谢这一点，无论我是否已将它与另一个答案结合使用来改进我糟糕的代码！！！！

【解决方案5】：

您可以创建一个 CSS 类并将其附加到所有 div。如果您希望 div 不可见但仍要在屏幕上占用适当数量的空间，则可以使用 CSS 的 visibility:hidden 属性，如果您希望它们完全不可见，则可以使用 display:none。

如果您使用 display:none，我相信您现有的代码应该仍然有效。 DIV 是隐藏的，但是一旦选择该选项，您的 jquery 就会显示它们。

【讨论】：

【解决方案6】：

将要隐藏的 div 的显示设置为“无”，类似于

<div id="layout_select2" style="display:none">

【讨论】：

【解决方案7】：

我同意 Stanley 将 css 类分配给 div 作为列选项并用作 -

$("#column_select").change(function() {         
    $('div[id^=layout_select]').hide();
    $('.'+this.value).show();  
});

您可以设置 display:none 选项为默认值。

演示 - http://jsfiddle.net/RGXa7/10/

【讨论】：