根據選擇下拉菜單隱藏/顯示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列”，那么他會看到第二個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的visible：hidden屬性，如果希望它們完全不可見，則可以使用display：none。

我相信，如果您使用display：none，那么您現有的代碼仍然可以使用。 DIV是隱藏的，但是一旦選擇了該選項，您的jquery就會顯示它們。

Answer 6

將要隱藏的div的顯示設置為“無”，類似於

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

Answer 7

我同意斯坦利（Stanley）的觀點，將CSV類分配給div作為列選項，並用作-

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

您可以將display：none選項設置為默認選項。

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