-
Notifications
You must be signed in to change notification settings - Fork 2
/
task_2_31.html
128 lines (118 loc) · 3.48 KB
/
task_2_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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>task_2_31</title>
<style>
*{margin:0;padding:0;}
input{outline:none;}
select{margin-right:10px;padding-left:10px;width:180px;height:40px;border:1px solid #ccc;border-radius:5px;outline:none;}
.warp{margin-top:200px;text-align:center;}
.choice{margin-bottom:20px;}
.choice label{margin:10px;}
.choice input{vertical-align:middle;}
.stu span{margin-right:20px;}
.no-stu{display:none;}
.no-stu label{margin-right:20px;}
.no-stu input{padding-left:20px;width:300px;height:30px;border:1px solid #ccc;border-radius:5px;}
</style>
</head>
<body>
<div class="warp">
<div class="choice">
<label for="atSchool">在校生</label>
<input name="checkRadio" type="radio" id="atSchool" checked>
<label for="outSchool">非在校生</label>
<input name="checkRadio" type="radio" id="outSchool">
</div>
<div class="stu">
<span>学校</span>
<select name="the_city" id="city"></select>
<select name="the_school" id="school"></select>
</div>
<div class="no-stu">
<label for="career">就业单位</label>
<input type="text" id="career">
</div>
</div>
<script>
// 学校json数据
var data = [{
address: '北京',
name: ['北京大学', '清华大学','北京航空航天大学']
},{
address: '上海',
name: ['复旦大学', '上海大学', '上海交通大学', '华东理工大学']
},{
address: '广东',
name: ['广东工业大学', '中山大学', '华南理工大学', '深圳大学', '广东外语外贸大学']
}];
// 定义变量
var atSchool = document.getElementById('atSchool');
var outSchool = document.getElementById('outSchool');
var city = document.getElementById('city');
var school = document.getElementById('school');
var stu = document.querySelector('.stu');
var noStu = document.querySelector('.no-stu');
var radio = document.querySelectorAll('input[type=radio]');
// 在校生和非在校生切换模块
var display = (function(){
var showHide = function(show,hide){
show.style.display = "block";
hide.style.display = "none";
};
return{
showHide : showHide
}
}());
// 联动模块
var link = (function(){
// 遍历填值
var paint = function(city){
for(var i = 0;i < data.length;i++){
var option = document.createElement('option');
option.value = data[i].address;
option.innerHTML = data[i].address;
city.appendChild(option);
};
};
// 二级联动
var secondLevel = function(city){
school.innerHTML = "";
for(var i = 0;i < data.length;i++){
if(city.childNodes[i].selected){
for(var j = 0;j < data[i].name.length;j++){
var option = document.createElement('option');
option.value = data[i].name[j];
option.innerHTML = data[i].name[j];
school.appendChild(option);
}
}
};
};
return{
paint : paint,
secondLevel : secondLevel
}
}());
// 切换显示在校生和非在校生部分
for(var i = 0;i < radio.length;i++){
radio[i].onclick = function(){
if(atSchool.checked){
display.showHide(stu,noStu);
}
else{
display.showHide(noStu,stu);
}
};
};
// 填入城市
link.paint(city);
link.secondLevel(city);
// 更换城市选项时二级联动
city.onclick = function(){
link.secondLevel(city);
};
</script>
</body>
</html>