Javascript的较少依赖下拉菜单
问题描述:
在我的应用程序要求用户输入:Javascript的较少依赖下拉菜单
- 州 - >市
- 分类 - >子类别
City
取决于State
和Sub-Category
取决于Category
。 我希望它先不使用JavaScript,然后添加一个不显眼的JavaScript以改善用户体验。
你将如何实现它?一次询问所有独立的领域?用多个步骤创建多步骤表单?任何其他可能性?
答
没有JS,这可能会让人厌烦。你会:
- 选择的状态
- 点击“下一步”
- 服务器接收你选择什么样的状态,并呈现一个新的页面下拉充分的相关引用
- 选择一个城市
- 单击下一步
- 有事
但与JS用户体验becom ES:
- 选择的状态
- 城市下拉出现
- 选择一个城市
- 有事
没有JS每次你想改变你的页面必须在服务器渲染你是一个新的国家。而对于这样的任务,这只是有点糟糕。
答
为了使没有JavaScript的工作,你需要像一个过程:
- 选择状态。
- 按下一个按钮,将表单发布到服务器。
- 返回一个包含所选州和城市的页面供您选择。
- 按下一个按钮,将表单发送到服务器。
没有脚本浏览器根据你在第一步选择什么不能做任何事情,所以你必须在服务器端做到这一点。
答
尝试使用<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两轮牛车。
+1
一个不错的解决方案,但它不能很好地扩展。 – Zecc
它可能不会那么糟糕。如果页面写得精简而快速,它们的响应速度与AJAX一样快(毕竟,从网络的角度来看,它几乎完全相同),唯一的区别是页面呈现时可能出现的“闪现” 。 – RobG