-
Notifications
You must be signed in to change notification settings - Fork 1
/
js-task2-03.html
130 lines (109 loc) · 3.02 KB
/
js-task2-03.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
129
130
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task2 03</title>
<style type="text/css">
body{
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
label{
margin: 10px;
}
select{
margin: 10px;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form name='identity-form' class="identity-form">
<label><input type="radio" name="student" class='student'>在校生</label>
<label><input type="radio" name="student" class='non-student'>非在校生</label>
</form>
<form name="school-form" class='school-form hidden'>
<label>学校
<select name='city'>
<option value="hongkong" class='hongkong'>香港</option>
<option value="shanghai" class='shanghai'>上海</option>
<option value="beijing" class='beijing'>北京</option>
</select>
<select name="school" id="school">
</select>
</label>
</form>
<form name="company-form" class='company-form hidden'>
<label>就业单位
<input type="text" name="company">
</label>
</form>
</div>
<script>
(function(){
const identityForm = document.forms['identity-form'];
const schoolForm = document.forms['school-form'];
const companyForm = document.forms['company-form'];
const schoolSelection = schoolForm.elements['school'];
const student = identityForm.querySelector('.student');
const nonStudent = identityForm.querySelector('.non-student');
const cities = {
hongkong: {
schools: ['香港大学', '香港科技大学', '香港浸会大学']
},
shanghai: {
schools: ['复旦大学', '上海交通大学', '同济大学']
},
beijing: {
schools: ['北京大学', '清华大学', '人民大学']
}
};
// 根据是否在校生显示不同表格
function identityHandler(){
student.addEventListener('click',() => {
if(student.checked){
companyForm.classList.add('hidden');
schoolForm.classList.remove('hidden');
}
});
nonStudent.addEventListener('click',() => {
if(nonStudent.checked){
schoolForm.classList.add('hidden');
companyForm.classList.remove('hidden');
}
});
};
// 添加学校选项到select标签
function addDataToSelect(select, obj){
select.innerHTML = '';
obj.schools.forEach(school => {
let optionItem = document.createElement('option');
optionItem.appendChild(document.createTextNode(school))
select.appendChild(optionItem);
});
};
// 根据城市选择渲染不同的学校内容
function renderSchools(){
addDataToSelect(schoolSelection, cities.hongkong);
schoolForm.elements['city'].addEventListener('change',() => {
let chosenCity = schoolForm.elements['city'].value;
addDataToSelect(schoolSelection, cities[chosenCity]);
})
};
function init(){
identityHandler();
renderSchools();
};
init();
})();
</script>
</body>
</html>