js基于json的级联下拉框

级联下拉列表是项目中常用到的。比如省市县，比如企业性质等，做成一个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