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>
/**
下拉列表多级联动处理函数
*/
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>