Javascript的较少依赖下拉菜单

Question

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

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

City取决于State和Sub-Category取决于Category。 我希望它先不使用JavaScript，然后添加一个不显眼的JavaScript以改善用户体验。

你将如何实现它？一次询问所有独立的领域？用多个步骤创建多步骤表单？任何其他可能性？

Answer 1

没有JS，这可能会让人厌烦。你会：

1. 选择的状态
2. 点击“下一步”
3. 服务器接收你选择什么样的状态，并呈现一个新的页面下拉充分的相关引用
4. 选择一个城市
5. 单击下一步
6. 有事

但与JS用户体验becom ES：

1. 选择的状态
2. 城市下拉出现
3. 选择一个城市
4. 有事

没有JS每次你想改变你的页面必须在服务器渲染你是一个新的国家。而对于这样的任务，这只是有点糟糕。

Answer 2

为了使没有JavaScript的工作，你需要像一个过程：

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

没有脚本浏览器根据你在第一步选择什么不能做任何事情，所以你必须在服务器端做到这一点。

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两轮牛车。