根据其他选择列表值显示隐藏选择列表

Question

以下代码根据父级选择列表的值显示一个（多个隐藏的）子选择列表。该脚本检查是否选择了任何值（在父级选择列表中），如果是，则显示相应的子选择列表。但是，如果用户选择父级选择列表的值，发布表单，获取子选择列表未命中输入的消息，并且（很可能）在浏览器中按下返回按钮，父级选择列表仍然有一个值（我猜是浏览器默认），并且子选择列表被隐藏，这很可能会混淆用户。

这怎么解决？

的Javascript：

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

HTML：

<select id="parent-list" name="parent"> 
    <option value="1">1</option> 
    ... 
</select> 
<select id="child-list-1 style="display:hidden"> 
    <option value="a">a</option> 
</select> 
<select id="child-list-2 style... 

Answer 1

我认为这是一个普遍的问题，据我所知没有完美的解决方案。

您需要找到一些方法来检查页面是否处于无效状态，例如刷新定时器（setInterval），它可以检查任何依赖关系并在必要时重新呈现。

如果用户在POST后按下后退按钮，他会收到警告（至少在某些浏览器中）。虽然你不能相信用户意识到这个问题...

编辑：此外，为什么用户重定向到错误消息的另一页？如果发生错误，您可以将其重定向回窗体，或者最好在提交表单之前执行验证客户端？

Answer 2

当文档准备好我通常选择在每一页上加载相应的选项，无论是通过代码生成的HTML或JavaScript的。