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

我通常会在每个页面加载时选择一个合适的选项，通过生成HTML的代码或文档准备好后的JavaScript。

Answer 2

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

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

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

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

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

2 个答案: