我所用到的一个“下拉列表多级联动”

JavaScript代码

/**
下拉列表多级联动处理函数
*/
function ChangeSelectList(inputObject, valueObject, levelId) {
for(var i=0; i<levelId.length; i++) {
if(inputObject.id == levelId[i]) {
thisIndex = i;
break;
}
}
nextIndex = parseInt(thisIndex) + 1;
thisValue = inputObject.value;

if(valueObject[thisValue] != undefined){
var nextLevelOpt = document.getElementById(levelId[nextIndex]);

var level2Num = nextLevelOpt.length;
for(var i=0; i<level2Num; i++) {
nextLevelOpt.remove(0);
}

nextLevelOpt.add(new Option("", ""));

for(var i=0; i < valueObject[thisValue].length; i++) {
nextLevelOpt.add(new Option(valueObject[thisValue][i][0], valueObject[thisValue][i][1]));
}

for(var i=0; i<level2Num; i++) {
nextLevelOpt.selected = false;
}
nextIndex++;
}
for (var i=nextIndex; i<levelId.length; i++) {
childLevelOpt = document.getElementById(levelId[i]);

child2Num = childLevelOpt.length;
for(var j=0; j<child2Num; j++) {
childLevelOpt.remove(0);
}
childLevelOpt.add(new Option("", ""));
}
}

/*
下拉列表数据初始化
*/
sortOptObject = new Object();
// 分类数组
var sortLevelId = new Array('','sort1','sort2','sort13','sort4');

sortOptObject['1'] = new Array();
sortOptObject['1'][0] = new Array('分类10','10');
sortOptObject['1'][1] = new Array('分类11','11');
sortOptObject['1'][2] = new Array('分类12','12');
sortOptObject['1'][3] = new Array('分类13','13');
sortOptObject['1'][4] = new Array('分类14','14');

sortOptObject['2'] = new Array();
sortOptObject['2'][0] = new Array('分类20','20');
sortOptObject['2'][1] = new Array('分类21','21');
sortOptObject['2'][2] = new Array('分类22','22');
sortOptObject['2'][3] = new Array('分类23','23');

sortOptObject['3'] = new Array();
sortOptObject['3'][0] = new Array('分类','32');
sortOptObject['3'][1] = new Array('分类','33');
sortOptObject['3'][2] = new Array('分类','34');
sortOptObject['3'][3] = new Array('分类','35');

sortOptObject['10'] = new Array();
sortOptObject['10'][0] = new Array('分类100','100');
sortOptObject['10'][1] = new Array('分类101','101');

sortOptObject['100'] = new Array();
sortOptObject['100'][0] = new Array('分类1000','1000');
sortOptObject['100'][1] = new Array('分类1001','1001');


页面使用方法:
<tr>
<td>分类</td>
<td>
<select id="sort1" name="sort1" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value="">
<option value="1">分类1</option>
<option value="2">分类2</option>
<option value="3">分类3</option>
</select>

<select id="sort2" name="sort2" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value=""></option>
</select>

<select id="sort3" name="sort3" onChange="ChangeSelectList(this, sortOptObject, sortLevelId)">
<option value=""></option>
</select>

<select id="sort4" name="sort4">
<option value=""></option>
</select>
</td>
</tr>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值