-
Notifications
You must be signed in to change notification settings - Fork 2
/
31.html
107 lines (107 loc) · 3.08 KB
/
31.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>task 31</title>
<style>
#firstbox{
display: block;
}
#secondbox{
display: none;
}
</style>
</head>
<body>
<div id="container">
<form id="theform" action="post">
<input id="student" type="radio" name="stu" value="student" checked/>
<label for="student">在校生</label>
<input id="notstudent" type="radio" name="stu" value="notstudent" />
<label for="notstudent">非在校生</label>
<div id="firstbox">
<select name="city" id="city">
<option value="select">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="haerbin">哈尔滨</option>
</select>
<select id="college" name="collage">
<option value="select">请选择</option>
</select>
</div>
<div id="secondbox">
<label for="danwei">就业单位</label>
<input id="danwei" type="text" name="danwei" />
</div>
</form>
</div>
<script>
//数据
var data = {
"beijing": [
"北京大学",
"清华大学",
"北京林业大学"
],
"shanghai": [
"东华大学"
],
"nanjing": [
"南京大学"
],
"haerbin": [
"哈尔滨工程大学"
]
};
//处理切换
var stus = document.getElementsByName('stu');
first = document.getElementById('firstbox'),
second = document.getElementById('secondbox');
stus[1].onclick = function(){
first.style.display = 'none';
second.style.display = 'block';
};
stus[0].onclick = function(){
second.style.display = 'none';
first.style.display = 'block';
};
//二级联动的实现
var selecteBox = document.getElementById('city');
var college = document.getElementById('college');
selecteBox.onchange = function(){
var selectedOption = selecteBox.options[selecteBox.selectedIndex].value;
var options;
switch (selectedOption) {
case "beijing":
options = data["beijing"];
break;
case "shanghai":
options = data["shanghai"];
break;
case "nanjing":
options = data["nanjing"];
break;
case "haerbin":
options = data["haerbin"];
break;
default:
}
render(options);
};
function render(options){
//将原有option清空
//for(var i = 0, len = college.options.length; i < len; i++){
// college.remove(i);
//}
college.innerHTML = "";
var itemsHTML = '';
for(var i = 0; i < options.length; i++){
itemsHTML += '<option>' + options[i] + '</option>';
}
college.innerHTML = itemsHTML;
}
</script>
</body>
</html>