二级联动---Linkage
效果
主动select影响从动select。
创建Linkage函数
function Linkage(o1,o2){
//接受传过来的ID
this.obj1 = document.getElementById(o1);
this.obj2 = document.getElementById(o2);
//定义绑定select数据的值
var obj1Data = "1|2|3".split("|");
var obj2Data = ["--无--".split("|"),"a1|a2|a3".split("|"),"b1".split("|"),"c1|c2".split("|")];
//创建元素
var opt = document.createElement("option");
opt.innerHTML = opt.value = "--无--";
//将创建的元素添加到select中
this.obj1.appendChild(opt);
for(var i=0;i<obj1Data.length;i++){
var opt = document.createElement("option");
opt.innerHTML = opt.value = obj1Data[i];
this.obj1.appendChild(opt);
}
//设置select默认选择第一个
this.obj1.selectIndex = 0;
//同理
this.obj2.length = 0;
var opt = document.createElement("option");
opt.innerHTML = opt.value = "--无--";
this.obj2.appendChild(opt);
this.obj2.selectedIndex = 0;
//将this复制给_this
var _this = this;
//为select绑定onchange事件
this.obj1.onchange = function () {
var tmp = obj2Data[this.selectedIndex];
_this.obj2.length = 0;
for (var i = 0; i < tmp.length; i++) {
var opt = document.createElement("option");
opt.innerHTML = opt.value = tmp[i];
_this.obj2.appendChild(opt);
}
if (tmp.length != 1) {
//当select的选项长度超过一个时为其添加option"其他"
var opt = document.createElement("option");
opt.innerHTML = opt.value = "其它";
_this.obj2.appendChild(opt);
}
_this.obj2.selectedIndex = 0;
}
}
this.init();
}
源代码：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>二级联动---Linkage---www.cnblogs.com/kuikui</title>
5 <script type="text/javascript">
6 function Linkage(o1, o2) {
7 this.obj1 = document.getElementById(o1);
8 this.obj2 = document.getElementById(o2);
9
10 var obj1Data = "1|2|3".split("|");
11 var obj2Data = ["--无--".split("|"), "a1|a2|a3".split("|"), "b1".split("|"), "c1|c2".split("|")];
12
13 this.init = function () {
14 this.obj1.length = 0;
15 var opt = document.createElement("option");
16 opt.innerHTML = opt.value = "--无--";
17 this.obj1.appendChild(opt);
18 for (var i = 0; i < obj1Data.length; i++) {
19 var opt = document.createElement("option");
20 opt.innerHTML = opt.value = obj1Data[i];
21 this.obj1.appendChild(opt);
22 }
23 this.obj1.selectedIndex = 0;
24 this.obj2.length = 0;
25 var opt = document.createElement("option");
26 opt.innerHTML = opt.value = "--无--";
27 this.obj2.appendChild(opt);
28 this.obj2.selectedIndex = 0;
29 var _this = this;
30 this.obj1.onchange = function () {
31 var tmp = obj2Data[this.selectedIndex];
32 _this.obj2.length = 0;
33 for (var i = 0; i < tmp.length; i++) {
34 var opt = document.createElement("option");
35 opt.innerHTML = opt.value = tmp[i];
36 _this.obj2.appendChild(opt);
37 }
38 if (tmp.length != 1) {
39 var opt = document.createElement("option");
40 opt.innerHTML = opt.value = "其它";
41 _this.obj2.appendChild(opt);
42 }
43 _this.obj2.selectedIndex = 0;
44 }
45 }
46 this.init();
47 }
48 </script>
49 </head>
50 <body>
51 <select id="test1">
52 </select>
53 <select id="test2">
54 </select>
55 <script type="text/javascript">
56 Linkage("test1", "test2");
57 </script>
58 </body>
59 </html>
