Question

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

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

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

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

Answer 1

Trigger the select change function on document.ready()

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

This will show/hide appropriate div