<选择>其值取决于另一个 ;

Question

我可以想到一种方法来做到这一点，但我不知道这是否是唯一的方法。

在我网站的页面上，我有两个选择框，一个“父”选择框和一个“子”选择框。 “子”选择框中的值取决于“父”选择框中选择的内容。 在 JavaScript 中，通过 AJAX 调用很容易解决这个问题，但是我尝试以这样的方式构建我的网站：当 JavaScript 关闭时，它们会正常降级。

对于非 js 用户，我能想到的处理这种情况的唯一方法是使用一个表单按钮，该按钮将重新加载 PHP 页面并将变量附加到 URL，然后 PHP 将检测到这一点并将值发送到“孩子的选择。 然而，这有点可用性问题，在我看来，这是一种丑陋的解决方法。

我还有其他方法可以做到这一点吗？ 这些值不一定需要位于选择框中。

Answer 1

使用 OPTGROUP可以帮助 JavaScript 过滤和禁用 JavaScript 时的可用性（假设没有大量选项）。

对于第二个 SELECT：

<select>
  <optgroup name="colors" label="Colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </optgroup>
  <optgroup name="sizes" label="Sizes">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </optgroup>
</select>

请记住，即使启用了 JavaScript，服务器端代码也需要验证选项。

Answer 2

禁用 Javascript 后，您别无选择，只能等待用户提交回服务器。

如果父选择中的值足够小，您可能可以为每个值选择一个，从而无需更新内容。

老实说，我不会打扰：统计数据显示 1% 或更少的用户禁用了 Javascript。 更多的人使用 Safari 和 Opera，很多人甚至懒得在这些浏览器上测试他们的网站。

要么您必须选择一组不同的 UI 元素，以便更优雅地降级。

最后，值得指出的是，如果网站做得足够好，您可以在 300 毫秒内完成页面刷新，此时返回服务器的成本（就用户体验而言）并不多。

Answer 3

除非确实有数千种可能的选择，否则您不需要 AJAX。 您可以简单地将所有可能的值加载到第二个选择中（使用选项组以提高可读性），并在选择父项后使用 JS 过滤它们。 您还需要使用 JS 禁用第二个框，以便用户始终首先选择父框。

Answer 4

不幸的是，如果您想将表单全部保留在一页上，则没有真正的好方法可以在不编写脚本的情况下解决此问题 - 您对按钮的想法可能是您可以获得的最佳方法。

另一种选择是将表单转变为多步骤过程，在其中选择一个页面上的父项目，然后移动到具有子选择的过程中的下一页 - 本质上是向导式的方法。