Show hide select list depending on other select list value
<p>The following code show one (of many hidden) child select list depending on the value of the parent select list. The script check if any value is selected (in the parent select list) and if so show the corresponding child select list. But if the user select a value for the parent select list, post the form, get a message that the child select list miss input and (most likely) presses back button in the browser the parent select list still has a value (I guess browser default) and the child select list is hidden which will most likely confuse the user.</p>

<p>How can this be solved?</p>

<p>Javascript:</p>

<pre><code>    $('#parent-list').live("change",function() {
        var value = $(this).find('option:selected').val();
        $("#child-list-"+value).slideDown(200).siblings().hide();
        return false;
    });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;select id="parent-list" name="parent"&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  ...
&lt;/select&gt;
&lt;select id="child-list-1 style="display:hidden"&gt;
   &lt;option value="a"&gt;a&lt;/option&gt;
&lt;/select&gt;
&lt;select id="child-list-2 style...
</code></pre>
