Question

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

我有两个链接选项：

选项1 =列选项2 =布局

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

<!-- 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很新，所以任何帮助都会非常感激。谢谢你们！

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>

Answer 2

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

Answer 3

触发document.ready()

上的选择更改功能

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

这将显示/隐藏适当的div

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

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

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

隐藏/显示基于选择下拉选择的Div

7 个答案: