jQuery show/hide options from one select drop down, when option on other select dropdown is slected without changing current option
<p>Bit of a complex one here, not sure if it is possible.</p>

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

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

<p>3 column + Layout 4 </p>

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

<p>3 column + Layout 5 or 2 column + Layout 2</p>

<p>I need the jQuery to keep the correct option selected upon refresh.</p>

<p>This is what I have so far:</p>

<pre><code>&lt;select name="column_select" id="column_select"&gt;
    &lt;option value="col1"&gt;1 column&lt;/option&gt;
    &lt;option value="col2"&gt;2 column&lt;/option&gt;
    &lt;option value="col3"&gt;3 column&lt;/option&gt;
&lt;/select&gt;

&lt;select name="layout_select" id="layout_select"&gt;
    &lt;!--Below shows when '1 column' is selected is hidden otherwise--&gt;
    &lt;option value="col1"&gt;none&lt;/option&gt;

    &lt;!--Below shows when '2 column' is selected is hidden otherwise--&gt;
    &lt;option value="col2_ms"&gt;layout 1&lt;/option&gt; 
    &lt;option value="col2_sm"&gt;layout 2&lt;/option&gt;

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

<p>The jQuery:</p>

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

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

<p>Demo - <a href="http://jsfiddle.net/N7Xpb/1/" rel="nofollow">http://jsfiddle.net/N7Xpb/1/</a></p>

<p>I am perplexed by javascript so any help would be greatly appreciated.</p>
