无Javascript的依赖下拉菜单

Question

在我的应用程序中，要求用户输入：

• 州 - ＆gt;城
• 类别 - ＆gt;子类别

City取决于State，而Sub-Category取决于Category。 我想首先没有javascript，然后添加一个不引人注目的JavaScript来改善用户体验。

你会如何实现它？立刻询问所有独立的领域？创建包含多个步骤的多步骤表单？还有其他可能性吗？

Answer 1

要使其在没有Javascript的情况下工作，您需要一个类似的程序：

• 选择州。
• 按下将表单发布到服务器的按钮。
• 返回包含所选州和可供选择的城市的页面。
• 按一下将表单发布到服务器的按钮。

没有脚本，浏览器无法执行任何操作，具体取决于您在第一步中选择的内容，因此您必须在服务器端执行此操作。

Answer 2

如果没有JS，那就太糟糕了。你会：

1. 选择州
2. 点击“下一步”
3. 服务器接收您选择的状态，并呈现一个新页面，其中包含完整相关的下拉列表
4. 选择一个城市
5. 点击下一步
6. 发生了一些事情

但是使用JS，用户体验变为：

1. 选择州
2. 城市下拉列表
3. 选择一个城市
4. 发生了什么事

每次想要更改页面时都没有JS，你必须让服务器为你呈现一个新的状态。对于像这样的任务，这有​​点糟糕。

Answer 3

尝试使用<optgroup>

<select name="cities">
  <optgroup label="State_one">
    <option value="City_one">City one</option>
    <option value="City_two">City two</option>
  </optgroup>
  <optgroup label="State_two">
    <option value="City_three">City three</option>
    <option value="City_four">City four</option>
  </optgroup>
</select>

如果你想要两个并排的选择，你可以用:active伪类做一些CSS hackery。