javascript - HideShow Div Based on Select Drop-Down Selections - Stack Overflow

admin管理员组

文章数量:1397800

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

I have two linked options:

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>

I have a working piece of jQuery that acplishes 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>

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.

How can I have the correct divs hidden on load?

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

You can see what I mean here: /

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

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

I have two linked options:

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>

I have a working piece of jQuery that acplishes 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>

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.

How can I have the correct divs hidden on load?

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

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

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

• javascript
• jquery

Share Improve this question Follow edited Oct 11, 2011 at 7:39 Nick asked Oct 11, 2011 at 7:14 NickNick 1,99933 gold badges2121 silver badges2424 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

You need to hide then once the DOM has loaded.

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

Trigger the select change function on document.ready()

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

This will show/hide appropriate div

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

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

You could create a CSS class and attach it to all the divs. You can use the visibility:hidden property of CSS if you want the divs to be invisible but still take the appropriate amounts of space on the screen, or display:none if you want them pletely invisible.

I believe your existing code should still work should you use display:none. DIVs are hidden, but your jquery will show them once the option is selected.

set the display to "none" for the divs which you want to hide similar to

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

i would agree with Stanley to assign css class to the divs as the columns options and use as -

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

you can set the display:none options for default.

Demo - http://jsfiddle/RGXa7/10/

本文标签： javascriptHideShow Div Based on Select DropDown SelectionsStack Overflow