根据选择下拉菜单隐藏/显示Div [英] Hide/Show Div Based on Select Drop-Down Selections

问题描述

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

I am developing a WP theme options panel but this is not WP specific.

我有两个链接的选项:

选项1 =列 选项2 =布局

Option 1 = Columns Option 2 = Layout

在选项一中所做的选择决定了选项二中显示的内容:

The selection made in option one dictates what is shown in option two:

<!-- 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，可以满足我的大部分需求:

I have a working piece of jQuery that accomplishes most of what I need:

<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.仅当用户切换选择菜单选项时，它们才会隐藏.

The problem I am facing right now is that on page load all divs are show. They are only hidden once the user toggles the select menu option.

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

How can I have the correct divs hidden on load?

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

UPDATE: I have had a few responses but I have likely not explained this properly. I do not want all the divs hidden upon loading the page. I just want the correct divs hidden upon load. So for example if the user selects '2 columns' he sees the second div. If he comes back to the options panel tomorrow or next month upon load he should still see the second div displayed. The jQuery must detect the currently selected option on load and show the appropriate div.

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

You can see what I mean here: http://jsfiddle.net/NickBe/RGXa7/3/

我对javascript和jQuery非常陌生，因此任何帮助将不胜感激.谢谢大家！

I am very new to javascript and jQuery so any help would be hugely appreciated. Thanks guys!

推荐答案

在document.ready()

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

这将显示/隐藏适当的div

This will show/hide appropriate div

这篇关于根据选择下拉菜单隐藏/显示Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！