javascript - 根据选择下拉菜单隐藏/显示 Div

Question

我正在开发一个 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 columns”，他会看到第二个 div。如果他明天或下个月加载时返回选项面板，他仍然应该看到显示的第二个 div。 jQuery 必须在加载时检测当前选定的选项并显示适当的 div。

你可以在这里明白我的意思:http://jsfiddle.net/NickBe/RGXa7/3/

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

Answer 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>