不依赖Javascript的下拉列表

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

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

城市

取决于

州

和

子类别

取决于

类别

。 我希望它能在没有javascript的情况下工作，然后添加一个不引人注目的javascript来改善用户体验

---

您将如何实施它？一次询问所有独立字段？创建包含多个步骤的多步骤表单？还有其他可能性吗？

如果没有JS，这会有点糟糕。你会：

选择一个状态

单击“下一步”

服务器接收您选择的状态，并呈现一个包含所有相关引用的下拉列表的新页面

选择一个城市

单击下一步

事情发生了

但有了JS，用户体验变得：

选择一个状态

城市下拉列表出现

选择一个城市

事情发生了

---

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

如果没有JS，这会有点糟糕。你会：

选择一个状态

单击“下一步”

服务器接收您选择的状态，并呈现一个包含所有相关引用的下拉列表的新页面

选择一个城市

单击下一步

事情发生了

但有了JS，用户体验变得：

选择一个状态

城市下拉列表出现

选择一个城市

事情发生了

---

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

要使其在没有Javascript的情况下工作，您需要以下过程：

• 选择状态
• 按下将表单发布到服务器的按钮
• 返回包含所选州和要选择的城市的页面
• 按一个按钮，再次将表单发布到服务器

---

如果不编写脚本，浏览器将无法根据您在第一步中选择的内容执行任何操作，因此您必须在服务器端执行此操作。

要使其在没有Javascript的情况下工作，您需要以下过程：

• 选择状态
• 按下将表单发布到服务器的按钮
• 返回包含所选州和要选择的城市的页面
• 按一个按钮，再次将表单发布到服务器

如果不编写脚本，浏览器将无法根据您在第一步中选择的内容执行任何操作，因此您必须在服务器端执行此操作。

尝试使用

第一城
第二城
第三城
第四城

如果您想同时选择两个选项，可以使用

：active

伪类进行CSS攻击。

尝试使用

第一城
第二城
第三城
第四城

---

如果您想同时选择两个选项，可以使用

：active

伪类进行CSS攻击。

它可能不会那么糟糕。如果页面写得精简快速，它们的响应速度将与AJAX一样快（毕竟，从网络的角度来看，这几乎是相同的过程），唯一的区别是在呈现页面时可能出现“flash”。它可能不会那么糟糕。如果页面写得精简快速，它们的响应速度将与AJAX一样快（毕竟，从网络的角度来看，这几乎是相同的过程），唯一的区别是在呈现页面时可能出现“flash”。这是一个不错的解决方案，但扩展性不太好。这是一个不错的解决方案，但扩展性不太好。

<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>