forked from taoyingsong/FEND_Practice
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path任意级选择器级联.html
197 lines (186 loc) · 5.03 KB
/
任意级选择器级联.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
</head>
<body>
<form action="#" id="content">
<select>
<option value="select">请选择一项</option>
</select>
<select>
<option value="select">请选择二项</option>
</select>
<select>
<option value="select">请选择三项</option>
</select>
<select>
<option value="select">请选择三项</option>
</select>
<select>
<option value="select">请选择三项</option>
</select>
</form>
<script type="text/javascript">
/*生成测试数据函数*/
var count = 0;
// limit - 列表的长度
// deep - 数据的层级数
// 返回一个测试数据列表
var genList = function(limit,deep){
var ret = [];
if (!deep){
return ret;
}
for(var i=0,it;i<limit;i++){
it = deep+'.'+i+'.'+(count++);
ret.push({
text:it,
value:it,
list:genList(limit,deep-1)
});
}
return ret;
};
/*任意级选择器级联控件封装*/
function cascade(selectList,data){
// 取第n级的数据列表
var getList = function(n){
var ret = data;
for(var i=0,it;i<n;i++){
// 默认选中第一项,selectedIndex下拉列表选择项索引，如果未选择，值为-1.
it = Math.max(0,selectList[i].selectedIndex);
ret = (ret[it]||{}).list;
}
return ret;
};
// 选择器填充
var fillSelector = function(select,list){
for(var i=select.length-1;i>=0;i--){
select.remove(i);
}
if (!list||!list.length){
return;
}
for(var i=0,l=list.length,it;i<l;i++){
it = list[i];
select.add(new Option(it.text,it.value));
}
};
// 第几级选择器变化事件
var onSelectChange = function(i){
// 1. 填充第i+1级选择器
// 2. 触发第i+1级选择器的change逻辑
var next = i+1;
if (next>=selectList.length){
return;
}
fillAndChange(next);
};
// 填充第几级选择器并触发该级选择器的change逻辑
var fillAndChange = function(index){
fillSelector(
selectList[index],
getList(index)
);
onSelectChange(index);
};
// 事件辅助函数，保存索引
var helper = function(index){
return function(){
onSelectChange(index);
};
};
for(var i=0,l=selectList.length-1;i<l;i++){
// 实践一下闭包的知识
// 或者针对高版本用bind，如 onSelectChange.bind(null,i)
selectList[i].onchange = helper(i);
}
// 初始化数据
fillAndChange(0);
}
/*自造测试数据*/
var data = [
{
text:'省/直辖市',
value:'0',
list:[
{
text:'区',
value:'0.0',
list:[
{
text:'路',
value:'0.0.0',
list:[]
}
]
}
]
},
{
text:'北京',
value:'1',
list:[
{
text:'朝阳区',
value:'1.1',
list:[
{
text:'朝阳路',
value:'1.1.1',
list:[]
}
]
},
{
text:'西城区',
value:'1.2',
list:[
{
text:'西城路',
value:'1.2.1',
list:[]
}
]
}
]
},
{
text:'上海',
value:'2',
list:[
{
text:'黄浦区',
value:'2.1',
list:[
{
text:'南京路',
value:'2.1.1',
list:[]
}
]
},
{
text:'长宁区',
value:'2.2',
list:[
{
text:'延安路',
value:'2.2.1',
list:[]
}
]
}
]
}
];
/*测试代码*/
var form = document.getElementById("content");
var list = form.getElementsByTagName('select');
var testData = genList(4, 5);
cascade(list, testData);
// cascade(list, data);
</script>
</body>
</html>