任务三十一:表单(三)联动
- 面向人群:
- 初学者
- 难度:
- 简单
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 加强对JavaScript的掌握
- 熟悉常用表单处理逻辑
任务描述
- 如示例图中所示,在页面中完成两个单选框,切换单选框的不同选项时下方显示的表单随之切换。
- 当选择在校生时,出现两个select下拉菜单,一个选择城市,一个选择学校,当选择非在校生时,出一个文本输入框
- 学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学,当城市发生变化时,学校一起发生变化
- 城市及学校的数据随意编造即可,无需真实完整
任务注意事项
- 要求功能实现与任务描述中完全一致
- 示例图仅为参考,样式不需要完全实现一致
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 不允许借助任何第三方组件库实现
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特