无需Java脚本的依赖下拉列表

Question

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

• 州->城市
• 类别->子类别

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黑客。