jQuery show/hide options from one select drop down, when option on other select dropdown is slected without changing current option

Bit of a complex one here, not sure if it is possible.

Below is a piece of jQuery which shows/hides options on one select drop down dependant on another select drop downs options. The code was written by a member here in response to a previous question.

The code effectively hides the options in the 'layout_select' dependant on the option selected in the 'column_select'. However, if I select

3 column + Layout 4

Upon pressing the save button the page reloads and the selected option becomes layout 3 again. The same happens if I select

3 column + Layout 5 or 2 column + Layout 2

I need the jQuery to keep the correct option selected upon refresh.

This is what I have so far:

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

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option value="col1">none</option>

    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>

    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm">layout 4</option>
    <option value="col3_sms">layout 5</option>
</select>

The jQuery:

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

Demo - http://jsfiddle.net/N7Xpb/1/

I am perplexed by javascript so any help would be g开发者_开发百科reatly appreciated.

My suggestion would be to store the selected values (after select option change) inside a cookie using JQuery's cookie plugin.

Then, in your $(document).ready(), you can set each of the select options from those stored values.