根據選擇下拉選擇隱藏/顯示div

我正在開發WP主題選項面板，但這不是WP特定的。根據選擇下拉選擇隱藏/顯示div

我有兩個連接的選擇：

選項1 =列選項2 =佈局

在選項進行的選擇一個決定什麼是在選項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所以任何幫助將非常感激。多謝你們！

來源

2011-10-11 Nick

觸發選擇改變功能開document.ready()

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

這將顯示/隱藏的div適當格

來源

2011-10-11 07:24:20 anu

感謝您的簡單解決方案！ – Nick

隨時:)。此外，我會建議使用開關案例陳述 – anu

您需要隱藏然後一旦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>

來源

2011-10-11 07:18:52

'＃column_select'的選定值可能因不同的請求而異。我認爲你應該檢查選定的值。如果你不打擾選定的值，那麼你可以使用CSS來隱藏其他div。 – Beniamin

您可以創建一個CSS類並將其附加到所有的div。如果您希望div不可見但仍然在屏幕上佔用適當的空間量，或者顯示：如果您希望它們完全不可見，則可以使用CSS的隱藏屬性。

我相信你現有的代碼應該仍然工作，如果你使用display：none。 DIV是隱藏的，但是一旦選擇了選項，你的jQuery就會顯示它們。

來源

2011-10-11 07:19:53

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

來源

2011-10-11 07:20:54

將顯示器設置爲「無」您要隱藏類似於

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

來源

2011-10-11 07:21:30 Sivakumar

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

來源

2011-10-11 07:27:54 campino2k

不做我所需要的東西，但感謝這一點，無論我用它與另一個答案來改善我的蹩腳代碼!!!! – Nick

我會士丹利同意CSS類分配給的div作爲列選項和使用作爲 -

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

您可以設置顯示：默認無選項。

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

來源

2011-10-11 07:29:21 Jayendra

根據選擇下拉選擇隱藏/顯示div

回答

相關問題