任务目的
- 加强对JavaScript的掌握
- 熟悉常用表单处理逻辑
任务描述
- 在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。
- 当选择在校生时，出现两个select下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框
- 学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化
- 城市及学校的数据随意编造即可，无需真实完整
整体思路
这个任务简单，就是一个最基本的联动表单
首先将HTML写出来
<form>
<div id="radioContainer">
<label><input type="radio" name="identity" value="student" checked>在校生</label>
<label><input type="radio" name="identity" value="gradute">非在校生</label>
</div>
<div id="inSchool">
<label>学校</label>
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="wh">武汉</option>
</select>
<select id="school">
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="北京邮电大学">北京邮电大学</option>
</select>
</div>
<div id="outSchool" class="hidden">
<label>就业单位</label>
<input type="text" name="company">
</div>
</form>
然后准备好数据
var data = {
bj : ["清华大学","北京大学","北京邮电大学"],
tj : ["天津大学","南开大学"],
wh : ["华中科技大学","武汉大学"]
}
给radio添加下对应的事件
var $ = function(id){
return document.getElementById(id);
}
function addHandler(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false);
}else if(ele.attachEvent){
ele.attachEvent("on" + type,handler);
}else{
ele["on" + type] = handler;
}
}
addHandler($("radioContainer"),"change",function(e){
var value = e.target.value;
if(value == "student"){
$("inSchool").classList.remove("hidden");
$("outSchool").classList.add("hidden");
}else if(value == "gradute"){
$("inSchool").classList.add("hidden");
$("outSchool").classList.remove("hidden");
}
});
最后给输入文本框添加事件
addHandler($("city"),"change",changeCity);
function changeCity(){
var selectedValue = $("city").options[$("city").selectedIndex].value;
var schools = data[selectedValue];
$("school").innerHTML = "";
for(var i=0,len=schools.length;i<len;i++){
var option = document.createElement('option');
option.value = schools[i];
option.innerHTML = schools[i];
$("school").appendChild(option);
}
}