级联下拉列表是项目中常用到的。比如省市县，比如企业性质等，做成一个js通用组件，
在静态页出来后可以直接插入，将数据和html静态页做一个解耦。
贴出来抛砖引玉吧。
/**
* @author sunfengjia edit
* 说明： 使用json数据格式，生成N级下拉框
* params:
* data: json对象
* select: 级联下拉框名称 调用eg：
var comboselect = ComboSelectFactory(data, 'p1', 'p2', 'p3', 'p4'); idKey: 数据的id字段名
textKey: 数据的显示文本字段名
parentIdKey: 数据的父节点字段名
topParentValue:最顶层的值
设定下拉列表 idKey,textKey,parentIdKey,topParent名称的方法eg:
comboselect.setProperties({idKey:'id',textKey:'text',parentIdKey:'parentid',topParentValue:'-1'}); 初始化下拉列表集合的方法eg:
comboselect.initSelect('gd');
*/var topParentValue = "-";
var idKey = "id", textKey = "text", parentIdKey = "parentid";var ComboSelectFactory = function(data){
return new ComboSelect(arguments);
}var ComboSelect = function(data){
this.myData = [].slice.call(data, 0, 1)[0];
this.ids = [].slice.call(data, 1);
this.setProperties({});
}ComboSelect.prototype.setProperties = function(opt){
this.topParentValue = opt.topParentValue || topParentValue;
this.idKey = opt.idKey || idKey;
this.textKey = opt.textKey || textKey;
this.parentIdKey = opt.parentIdKey || parentIdKey; for(var i=0, len=this.ids.length-1; i<len; i++){
var o = this.$(this.ids[i]);
//给第i个select添加change事件，初始化该下拉列表的下级select
this.addEventHandler(o, 'change', this.eventHandle(o,i));
} this.initChild(null, 0);
}ComboSelect.prototype.eventHandle = function(o,i) {
var self = this;
var oreg = o;
var index = i+1;
return function() {
self.initChild(oreg, index);
}
}/**
* 说明： 当select选定一个option后，根据该option的值，查找 parentID 为该 optionID 的项，
* 生成option，插入下级select。
* @params:
* oSelect: 父级select对象
* index: 父级select索引
*/
ComboSelect.prototype.initChild = function(oSelect, index){
var p = null == oSelect ? this.topParentValue : oSelect.options[oSelect.selectedIndex].value;
var ds = this.getChilds(p);
this.clearSelect(index);
var child = this.$(this.ids[index]);
for(var i=0, len=ds.length; i<len; i++){
var currentObj = ds[i];
child.options[child.length] = new Option(currentObj[this.textKey], currentObj[this.idKey]);
}
}/**
* 说明： 查找指定ID的子
* @params:
* parentID: 查找该ID的子
* returns: 子的array
*/
ComboSelect.prototype.getChilds = function(parentID) {
var childs = [];
for(var i=0, len=this.myData.length; i<len; i++){
if(parentID == this.myData[i][this.parentIdKey]){
childs.push(this.myData[i]);
}
}
return childs;
}/**
* 说明： 将索引以下的select清空
* @params:
* index: 父级对象索引
*/
ComboSelect.prototype.clearSelect = function(index) {
for(var i=index, len=this.ids.length; i<len; i++){
this.$(this.ids[i]).length=1;
}
}/**
* 说明： 初始化下拉列表集合。
* @params:
* id: 选中项ID
*/
ComboSelect.prototype.initSelect = function(id){
var parentids = [];
parentids = this.getParent(id);
for (var i=0, len=this.ids.length; i<len; i++){
//顶层直接初始化，子级select用父级的选中值初始化
if(i==0){
this.initChild(null, 0);
}else{
this.initChild(this.$(this.ids[i-1]),i);
}
if(parentids[i]!=null){
this.$(this.ids[i]).value = parentids[i][this.idKey];
}
}
}/**
* 说明： 得到指定ID的父级array
* @params:
* id: 选中项ID
*/
ComboSelect.prototype.getParent = function(id) {
var parents = [];
for(var i=0, len=this.myData.length; i<len; i++){
if(id == this.myData[i][this.idKey]){
if(this.myData[i][this.parentIdKey] == this.topParentValue){
parents.push(this.myData[i]);
break;
}else{
parents = this.getParent(this.myData[i][this.parentIdKey]);
parents.push(this.myData[i]);
}
}
}
return parents;
}ComboSelect.prototype.$ = function(sid) {
return document.getElementById(sid);
}ComboSelect.prototype.addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
html页面中的调用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type='text/javascript' src='scripts/ComboSelect.js'></script></head>
<script type="text/javascript">/*-- 数据定义 ---------------------------*/
var data = []; data.push({id:'cn', text:'中国', parentid:'-'}); data.push({id:'fj', text:'福建', parentid:'cn'});
data.push({id:'gd', text:'广东', parentid:'cn'}); data.push({id:'fz', text:'福州', parentid:'fj'});
data.push({id:'xm', text:'厦门', parentid:'fj'});
data.push({id:'ly', text:'龙岩', parentid:'fj'}); data.push({id:'fz-fq', text:'福州1', parentid:'fz'});
data.push({id:'fz-mh', text:'福州2', parentid:'fz'});
data.push({id:'fz-cl', text:'福州3', parentid:'fz'}); data.push({id:'xm-dn', text:'厦门1', parentid:'xm'});
data.push({id:'xm-jm', text:'厦门2', parentid:'xm'});
data.push({id:'xm-xl', text:'厦门3', parentid:'xm'}); data.push({id:'yl-xl', text:'龙岩1', parentid:'ly'});
data.push({id:'yl-lc', text:'龙岩2', parentid:'ly'});
data.push({id:'yl-sh', text:'龙岩3', parentid:'ly'});
data.push({id:'yl-wp', text:'龙岩4', parentid:'ly'}); data.push({id:'gz', text:'广州', parentid:'gd'});
data.push({id:'sz', text:'深圳', parentid:'gd'});
data.push({id:'mx', text:'梅县', parentid:'gd'}); data.push({id:'gz-fq', text:'广州1', parentid:'gz'});
data.push({id:'gz-mh', text:'广州2', parentid:'gz'});
data.push({id:'gz-cl', text:'广州3', parentid:'gz'}); data.push({id:'sz-dn', text:'深圳1', parentid:'sz'});
data.push({id:'sz-jm', text:'深圳2', parentid:'sz'});
data.push({id:'sz-xl', text:'深圳3', parentid:'sz'}); data.push({id:'mx-xl', text:'梅县1', parentid:'mx'});
data.push({id:'mx-lc', text:'梅县2', parentid:'mx'});
data.push({id:'mx-sh', text:'梅县3', parentid:'mx'});
data.push({id:'mx-wp', text:'梅县4', parentid:'mx'}); data.push({id:'ny', text:'纽约', parentid:'am'});
data.push({id:'hsd', text:'华盛顿', parentid:'am'});
data.push({id:'am', text:'美国', parentid:'-'});function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}
//在onload后执行
window.onload = function() {
comboselect = ComboSelectFactory(data, 'p1', 'p2', 'p3', 'p4');
comboselect.setProperties({idKey:'id', texKey:'text', parentIdKey:'parentid', topParentValue:'-'});
comboselect.initSelect('mx-wp');
}
</script>
<body>
<select id="p1"><option>-选择-</option></select><br/>
<select id="p2"><option>-选择-</option></select><br/>
<select id="p3"><option>-选择-</option></select><br/>
<select id="p4"><option>-选择-</option></select>
</body> </html>
comboselect.setProperties方法可以根据数据值自己自定义代码已上传https://github.com/sunfengjiajia/spring-boot-test
