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>
分享到:
相关推荐
下拉列表多级联动,根据xml文件可以生成三个下拉列表,并且根据所选内容不同,可以显示不同的内容
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了
oselect.js 原生JS写的多级联动下拉列表,联动级数可以自定义,不限级数。可用作省、市、区联动,或其他的多级分类选择。使用方法请参考demo。
原生JS写的多级联动下拉列表,联动级数可以自定义,不限级数。可用作省、市、区联动,或其他的多级分类选择。使用方法请参考demo文件。
Access中窗体实现二级联动下拉示范,用VBA配合SQL查询来做rowsource,实现二级下拉跟着一级内容变化,如果一级内容没有选择,二级显示所有
Excel 多级联动下拉列表实例
http://blog.csdn.net/aa1049372051/article/details/21021001文章中用到的sql文件
JavaScript 自定义多级联动下拉菜单
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
excle多级联动下拉列表模版(省市县) 采用省市县行数据格式,无需处理数据格式,更加方便快捷 内附excle多级联动下拉列表模版供参考
多级联动下拉选择框,动态获取下一级多级联动下拉选择框,动态获取下一级
本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3...
这是将《用Ajax实现多级联动下拉列表(无限级别,JSON传输数据,含全国地区数据库))》(原来是asp的)改写成JSP。下载包中包含一个org.json.jar,测试的时候,请将这个包加了应用服务器的lib目录中,原文地址:...
js javascript 多级下拉列表联动 正则表达式
本文为大家详细介绍下下拉列表多级联动 dropDownList具体的实现代码,感兴趣的朋友可以参考下哈,至于一些细节部分后续再补
多款多级联动下拉菜单打包!必有一款适合你!ajax,php,js,等!
本文介绍了Excel内如何设置多级联动下拉菜单,即选择一个数据后,后续数据根据前一个数据的选择结果进行过滤。
多级联动下拉菜单,可单选可多选,使用了jQuery.Hz2Py,支持中英文混合检索