js基于json的级联下拉框

Posted PP孩的家

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基于json的级联下拉框相关的知识,希望对你有一定的参考价值。

级联下拉列表是项目中常用到的。比如省市县,比如企业性质等,做成一个js通用组件,

在静态页出来后可以直接插入,将数据和html静态页做一个解耦。

贴出来抛砖引玉吧。

<html>
<script type="text/javascript">
/**  基于json的级联下拉列表,支持初始化
   调用eg:
       var comboselect = ComboSelectFactory(data, ‘p1‘, ‘p2‘, ‘p3‘, ‘p4‘);
       
   设定下拉列表value,text,parentid名称的方法eg:
    comboselect.setProperties({id:‘id‘,text:‘text‘,parentid:‘parentid‘,defaultvalue:‘defaultvalue‘});
    
   初始化下拉列表集合的方法eg:
    comboselect.initSelect(‘gd‘);
 */
 
 

var ComboSelectFactory = function(data){
    var comboselect = new ComboSelect(arguments);
    return comboselect;
}

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.defaultvalue = opt.defaultvalue || -;
    this.id = opt.id || id;
    this.text = opt.text || categoryname;
    this.parent = opt.parent || parentid;

    for(var i=0, len=this.ids.length-1; i<len; i++){
        var o = this.$(this.ids[i]);
        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);
    }
}

ComboSelect.prototype.initChild = function(oSelect, index){
    var p = null == oSelect ? this.defaultvalue : 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.text], currentObj[this.id]);
    }
}

ComboSelect.prototype.clearSelect = function(index) {
    for(var i=index, len=this.ids.length; i<len; i++){
        this.$(this.ids[i]).length=1;
    }
}

ComboSelect.prototype.getChilds = function(p) {
    var childs = [];
    for(var i=0, len=this.myData.length; i<len; i++){
        if(p == this.myData[i][this.parent]){
            childs.push(this.myData[i]);
        }
    }
    return childs;
}

ComboSelect.prototype.initSelect = function(id){
    var parentids = [];
    parentids = this.getParent(id);
    for (var i=0, len=this.ids.length; i<len; i++){    
        if(i==0){
            this.initChild(null, 0);
        }else{
            this.initChild(this.$(this.ids[i-1]),i);
        }
        this.$(this.ids[i]).value = parentids[i][this.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.id]){
            if(this.myData[i][this.parent] == this.defaultvalue){            
                parents.push(this.myData[i]);
                break;
            }else{
                parents = this.getParent(this.myData[i][this.parent]);            
                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;
    }
}

/*-- 扩展的级联 ---------------------------*/
    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:am, text:美国, parentid:-});

    data.push({id:ny, text:纽约, parentid:am});
    data.push({id:hsd, text:华盛顿, parentid:am});

function makeArray(arg1, arg2){
    return [ this, arg1, arg2 ];
}
//在onload后执行
window.onload = function() {
    comboselect = ComboSelectFactory(data, p1, p2, p3, p4);
    comboselect.setProperties({id:id,text:text});
}
</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>

 

以上是关于js基于json的级联下拉框的主要内容,如果未能解决你的问题,请参考以下文章

使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 的级联下拉

下拉框的级联效果的制作。

基于Jquery的级联选择器

element Ui的级联选择器 任意一级选中下拉框自动关闭

使用 Json 和 Jquery 的 Asp.net MVC4 中的级联下拉列表不填充

如何解决不工作的级联下拉