任務目的
- 加強對JavaScript的掌握
- 熟悉常用表單處理邏輯
任務描述
- 如示例圖中所示，在頁面中完成兩個單選框，切換單選框的不同選項時下方顯示的表單隨之切換。
- 當選擇在校生時，出現兩個select下拉菜單，一個選擇城市，一個選擇學校，當選擇非在校生時，出一個文本輸入框
- 學校下拉菜單里的學校名單均為城市下拉菜單中所選的城市中的大學，當城市發生變化時，學校一起發生變化
- 城市及學校的數據隨意編造即可，無需真實完整
任務注意事項
- 要求功能實現與任務描述中完全一致
- 示例圖僅為參考，樣式不需要完全實現一致
- 請注意代碼風格的整齊、優雅
- 代碼中含有必要的注釋
- 不允許借助任何第三方組件庫實現
在線學習參考資料
表單（三）聯動總結
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。
語法：
var optionElementReference = new Option([text, [value, [defaultSelected, [selected]]]]);
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