JS多级联动下拉列表（不限级数）
来源：互联网 发布：淘宝网吸顶灯 编辑：程序博客网 时间：2024/06/08 15:06
JS多级联动下拉列表，可用于省、市、区三级联动，或多级分类联动选择等。
不限级数，兼容浏览器，使用方法请看下面的HTML示例。
示例效果如下图所示：
图1
图2
JS源代码如下：
function oSelect(id, box, _config){this.id = (id || 'oselect') ;//+ parseInt(new Date().getTime()/1000, 10);this.box = box || null;if(typeof this.box != 'object'){this.box = this.$(this.box);}if(_config == undefined){_config = {};}this.config = {maxLevel: _config.maxLevel || -1,showEmptySelect: _config.showEmptySelect != undefined ? _config.showEmptySelect : true,callback: _config.callback || null};this.maxLevel = 0;}oSelect.prototype.$ = function(i){return document.getElementById(i);};oSelect.prototype.create = function(param){var _ = this;if(typeof param == 'undefined'){param = {};}var level = param.level || this.maxLevel;var obj = this.$(this.id + level);if((level > this.config.maxLevel && this.config.maxLevel > 0) || obj != null){return obj;}var obj = document.createElement('select');obj.id = this.id + level;obj.className = 'select';obj.level = level;obj.onchange = function(){var callback = param.callback || _.config.callback;if(typeof callback == 'function'){callback(param.param != null ? param.param : {val:_.getSelectedOptionValue(this),txt:_.getSelectedOptionText(this),level:this.level}, _);}};this.box.appendChild(obj);this.maxLevel = obj.level;return obj;};oSelect.prototype.getSelectedOptionText = function(obj){return obj.options[obj.options.selectedIndex].text;};oSelect.prototype.getSelectedOptionValue = function(obj){return obj.options[obj.options.selectedIndex].value;};oSelect.prototype.fillOption = function(obj, val, txt) {if(obj != null){obj.options.add(new Option(txt, val));}};oSelect.prototype.initial = function(param){for(var i=0,c=param.length; i<c; i++){if(i > this.config.maxLevel){break;}var obj = this.$(this.id + i);if(obj == null){obj = this.create({level:i});}if(param[i].list != undefined){for(var j=0,cc=param[i].list.length; j<cc; j++){this.fillOption(obj, param[i].list[j].val || param[i].list[j].id, param[i].list[j].txt || param[i].list[j].name);}if(param[i].selectedValue != undefined){obj.value = param[i].selectedValue;}}}if(this.config.showEmptySelect){for(var i=param.length; i<=this.config.maxLevel; i++){this.create({level:i});}}};oSelect.prototype.fill = function(level, val, txt){var obj = this.create({level:level});if(obj != null){obj.style.display = '';this.fillOption(obj, val, txt);}};oSelect.prototype.clear = function(level){for(var i = this.maxLevel; i > level; i--){var obj = this.$(this.id + i);if(obj != null){obj.options.length = 0;if(i > level){obj.style.display = this.config.showEmptySelect ? '' : 'none';}}}};oSelect.prototype.getSelectedDataList = function(){if(this.box != null){var result = [];var childs = this.box.childNodes;for(var i=0,c=childs.length; i<c; i++){if(childs[i].level != undefined && childs[i].options.length > 0){var val = this.getSelectedOptionValue(childs[i]);if(val != '' && val != '-1'){//result.push({val:this.getSelectedOptionValue(childs[i]),txt:this.getSelectedOptionText(childs[i]),level:childs[i].level});result.push([val,this.getSelectedOptionText(childs[i]),childs[i].level]);}}}return result;}return null;};oSelect.prototype.getSelectedValueList = function(){if(this.box != null){var childs = this.box.childNodes;var vals = [];var txts = [];for(var i=0,c=childs.length; i<c; i++){if(childs[i].level != undefined && childs[i].options.length > 0){var val = this.getSelectedOptionValue(childs[i]);if(val != '' && val != '-1'){vals.push(val);txts.push(this.getSelectedOptionText(childs[i]));}}}return [vals, txts];}return null;};oSelect.prototype.getSelectedValue = function(){if(this.box != null){var childs = this.box.childNodes;for(var i=childs.length-1; i>=0; i--){if(childs[i].level != undefined && childs[i].options.length > 0){var val = this.getSelectedOptionValue(childs[i]);if(val != '' && val != '-1'){return [val, this.getSelectedOptionText(childs[i]), childs[i].level];}}}}return null;};<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题页</title><meta name="description" content="" /> <meta name="keywords" content="" /><style type="text/css">body{font-size:12px;font-family:Arial,宋体;}</style><script type="text/javascript" src="oselect.js"></script><script type="text/javascript" src="data.js"></script></head><body><input type="button" value="加载数据" onclick="test();" /><div id="divBox" style="margin:10px 0;"></div><div id="divDebug"></div></body></html><script type="text/javascript">function test(){var obj = new oSelect('os', 'divBox', {callback:callback,maxLevel:3,showEmptySelect:false});//初始化obj.initial([{list:[{txt:'请选择',val:'-1'},{txt:'第一级目录',val:'1'}],selectedValue:'1'},{list:[{txt:'请选择',val:'-1'},{txt:'第二级目录1',val:'11'},{txt:'第二级目录2',val:'12'},{txt:'第二级目录3',val:'13'}], selectedValue:'-1'}/*,{list:[{txt:'请选择',val:'-1'},{txt:'第三级目录1',val:'111'},{txt:'第三级目录2',val:'112'},{txt:'第三级目录3',val:'113'}], selectedValue:'111'},{list:[{txt:'请选择',val:'-1'},{txt:'第四级目录1',val:'1111'},{txt:'第四级目录1',val:'1112'}], selectedValue:'1111'}*/]);}function callback(param, objSelect){var strHtml = '';strHtml += '当前选中的内容：<br />';strHtml += 'val:' + param.val + ', txt:' + param.txt + ', level:' + param.level + '<br />';objSelect.clear(param.level);getDataList(param.level + 1, param.val, objSelect);strHtml += '<br />当前所有选中的内容：<br />';var arrRst = objSelect.getSelectedDataList();for(var i in arrRst){strHtml += 'value:' + arrRst[i][0] + ', text:' + arrRst[i][1] + ', level:' + arrRst[i][2] + '<br />';}strHtml += '<br />当前选中的值列表：<br />';var arr = objSelect.getSelectedValueList();if(arr != null){strHtml += '值列表：' + arr[0] + '<br />';strHtml += '文本列表：' + arr[1] + '<br />';}strHtml += '<br />当前选中的有效值：<br />';arr = objSelect.getSelectedValue();if(arr != null){strHtml += '值：' + arr[0] + '<br />';strHtml += '文本：' + arr[1] + '<br />';strHtml += 'Level：' + arr[2] + '<br />';}document.getElementById('divDebug').innerHTML = strHtml;}//模拟取数据function getDataList(level, val, objSelect){var dataList = [];switch(level){case 1:if(val == '01'){dataList = [{txt:'请选择',val:'-1'},{txt:'第二级目录1',val:'11'},{txt:'第二级目录2',val:'12'},{txt:'第二级目录3',val:'13'}];} else {dataList = [{txt:'请选择',val:'-1'}];}break;case 2:if(val == '11'){dataList = [{txt:'请选择',val:'-1'},{txt:'第三级目录1',val:'111'},{txt:'第三级目录2',val:'112'},{txt:'第三级目录3',val:'113'}];} else if(val == '12'){dataList = [{txt:'请选择',val:'-1'},{txt:'第三级目录1-1',val:'111-1'},{txt:'第三级目录1-2',val:'111-2'},{txt:'第三级目录1-3',val:'111-3'}];} else if(val == '13'){//这里假设没有内容} else {dataList = [{txt:'请选择',val:'-1'}];}break;case 3:if(val == '111'){dataList = [{txt:'请选择',val:'-1'},{txt:'第四级目录1',val:'1111'},{txt:'第四级目录2',val:'1112'}];}break;}for(var i in dataList){objSelect.fill(level, dataList[i].val, dataList[i].txt);}}</script> 0 0
- JS多级联动下拉列表（不限级数）
- JS多级联动下拉列表（不限级数）
- Ajax技术--多级联动下拉列表（$.ajax()）
- 多级联动下拉列表Ajax方案实现
- yii 下拉列表多级联动 dropDownList
- yii 下拉列表多级联动 dropDownList
- yii 下拉列表多级联动 dropDownList 实现
- THINKPHP + JQUERY 多级下拉列表联动
- js 省市下拉列表联动
- js 省市下拉列表联动
- JS实现下拉列表联动
- 多级下拉列表（angular）
- ASP利用数据表生成多级联动下拉列表框
- 如何利用Excel数据有效性制作多级联动下拉列表
- select 多级联动下拉
- 二级联动 三级联动 多级联动 无限级联动下拉列表或菜单专题
- js自定义多级联动下拉菜单，实用方便
- Js 实现下拉款选择后多级联动效果
- STL中map用法详解
- CentOS下如何安装libevent
- 编译出错：file is universal (4 slices) but does not contain a(n) armv7s slice
- codeforces 225C Barcode (dp)
- SVN上传临时目录导致svn钩子出错提示解决
- JS多级联动下拉列表（不限级数）
- JS获取GET请求中QueryString中的参数
- Linux命令学习：alias
- Hi3518学习：编译osdrv
- UVALive - 3644 - X-Plosives （并查集！！）
- iOS--XMPP文件传输
- altium designer生成gerber文件和NC Drill文件
- orcad capture WARNING(ORCAP-36038): 解决办法
- 提高Java架构师和程序员效率的10个工具
