任务目的

• 加强对JavaScript的掌握
• 熟悉常用表单处理逻辑

任务描述

• 如示例图中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。
• 当选择在校生时，出现两个select下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框
• 学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化
• 城市及学校的数据随意编造即可，无需真实完整

任务注意事项

• 要求功能实现与任务描述中完全一致
• 示例图仅为参考，样式不需要完全实现一致
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 不允许借助任何第三方组件库实现

在线学习参考资料

• Web相关名词通俗解释
• MDN HTML入门
• 慕课HTML+CSS基础教程视频
• JavaScript 表单验证
• HTML表单指南

表单（三）联动总结

1、Select options Collection

options集合返回一个下拉列表中所有<option>元素集合。

注意：集合中的元素顺序和它们在代码中顺序相同。

语法：

selectObject.options

属性：

length:返回集合中的<option>元素数量。注意：这个属性只读。

selectIndex:设置或返回集合中选中的<option>元素下标。（从0开始）。

方法：

[index]方法：返回集合中指定下标的<option>元素（从0开始）。如果下标越界则返回null。

[add(option[,index])]方法：将一个<option>元素添加到集合中的指定下标中，如果没有指定下标，将option插入到集合的末尾。

item(index):返回集合中指定下标的<option>元素（从0开始）。如果下标越界返回null。

namedItem(id):返回集合中特定id的<option>元素。注意：如果id不存在返回null。

remove（index）：从集合中移除指定下标的<option>元素。

返回值：

一个HTMLOptionsCollection对象，代表<select>元素中所有<option>元素。集合中的元素和代码中出现顺序相同。

2、Option()

构造器，用于产生一个HTMLOptionElement。

语法：

optionElementReference:新构造的HTMLOptionElement的引用。

text:一个字符串，用于设置元素的内容。

value：一个字符串，用于设置value属性。

defaultSelected：一个布尔值，设置selected属性，默认值是false。将值改为true并不会将option设为selected。

selected：一个布尔值，用于设置option的selected状态，默认值为false（没有被选中），如果省略，即使defaultSelected设为true，option也未被选中。

3、onchange Event

当元素的值发生改变时触发onchange事件，对于radiobutton和checkbox当选中和未选中状态发生变化时触发onchange事件。

注意：onchange事件和oninput事件类似，两者的区别是：当元素值发生改变时oninput事件立即触发，当元素内容变更并且失去焦点后触发onchange事件。并且onchange事件也可用于<keygen>和<select>元素。

4、已提交作业

代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task3-3

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task3-3/index.html

表单（三）联动总结