Question

我可以想到一种方法，但我不知道它是否是唯一的方法。

在我网站的页面上，我有两个选择框，一个“父”选择框和一个“子”选择框。 “子”选择框内的值取决于“父”选择框中选择的内容。这可以通过AJAX调用在JavaScript中轻松解决，但是我尝试以这样的方式构建我的网站，以便在JavaScript关闭时它们优雅地降级。

我能想到为非js用户接近这种情况的唯一方法是使用一个表单按钮来重新加载PHP页面并将一个变量附加到URL，然后PHP将检测到这一点并发送值到'孩子'选择。然而，这是一个可用性问题和IMO，这是一种难以理解的方法。

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

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

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

Answer 3

不幸的是，如果你想把表单保存在一个页面上，没有脚本就没有一个好方法可以解决这个问题 - 你对按钮的想法可能是你能得到的最好的。

替代选项是将表单转换为多步骤过程，在该过程中，他们在一个页面上选择父项，然后移动到具有子项选择的过程中的下一页 - 实际上，向导式方法。

Answer 4

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

如果父选择中的值足够小，您可能可以为每个值选择一个，这将绕过更新内容的需要。

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

或者您必须选择一组不同的UI元素，这些元素会更优雅地降级。

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

<select>，其值取决于另一个</select>

4 个答案: