javascript级联插件

(function(){/** 获取对象 */var $ = function(id){return typeof id == "string" ? document.getElementById(id):id;};/** 绑定事件流 */var bind = function(obj, eventName, funcionName){if(obj.addEventListener){obj.addEventListener(eventName, funcionName,false); }else if(obj.attachEvent) {obj.attachEvent("on" + eventName, funcionName); }else{obj["on" + eventName] = funcionName; }};var Cascading = function(ids){/** 存放级联id,数据类型为数组(字符串或者select对象),前一个为后一个的父节点 */for(var i=0,len=ids.length;i<len;i++){var select = $(ids[i]);Array.prototype.push.call(this, select);/** 设置初始下标为0 */this.indexes.push(0);/** 追加事件 */bind(select, "change", this._change(select, i));}};Cascading.prototype = {/** 级联深度 */length:0,/** 级联选择下标 */indexes:[],/** 默认--- 请选择 ---为首项占位符 */_defaultSpace:"--- \u8bf7\u9009\u62e9 ---",/** 级联数据存放 */_buffer:null,_opt:function(name, code){return new Option(name, code);},_change:function(select, index){/** 延长自身作用域 */var tmp = this;return function(){tmp.indexes[index] = select.selectedIndex;/** 超过级联深度 */if(index>=tmp.length-1) return;var data = tmp._buffer;/** 查找需要刷入的数据 */for(var i=0;i<=index;i++){var idx = tmp.indexes[i];/** 去除请选择的级联 */if(idx==0) {data = null;//清除break;}data = data[idx-1].children;if(!data) break;}/** 刷新下一个级联 */tmp._flush(index+1, data);/** 清除后续级联值 */tmp._reset(index+2);}},setData:function(jsonArray){/** * 数据格式为jsonArray,支持多级级联,以省市县为例, * 示例:[ *{"code":"01","name":"北京","children":[{"code":"0001","name":"北京市","children":[{"code":"0000001","name":"朝阳"},{"code":"0000002","name":"海淀"},{"code":"0000003","name":"西城"}]}]}, *      {"code":"02","name":"四川","children":[{"code":"0002","name":"成都市","children":[{"code":"0002001","name":"金牛"},{"code":"0002002","name":"成华"},{"code":"0002003","name":"青阳"}]}, *       {"code":"0003","name":"乐山市","children":[{"code":"0003001","name":"市中区"},{"code":"0003002","name":"五通桥"},{"code":"0003003","name":"测试区"}]}]} *      ]*/this._buffer = jsonArray;return this;},_setRoot:function(){/** 最大父节点的初始化 */var root = this[0];/** 填充数据 */this._fillData(root, this._buffer);},_fillData:function(select, data){/** 填充级联数据 */var opts = select.options;/** 设置占位选项 */opts[0] = this._opt(this._defaultSpace, "-1");opts[0].selected = true;/** 无值则不填充相应数据 */if(!data) return;for(var i=0,len=data.length;i<len;i++){opts[opts.length] = this._opt(data[i].name, data[i].code);}},_flush:function(index, data){var s = this[index];/** 清除原有数据 */s.innerHTML = "";this._fillData(s, data);},_reset:function(index){/** 重置后续级联数据 */for(;index<this.length;index++){this[index].innerHTML = "";var opts = this[index].options;opts[0] = this._opt(this._defaultSpace, "-1");}},setSpace:function(space){this._defaultSpace = space;return this;},init:function(){/** 初始化根节点 */this._setRoot();/** 重置后续节点 */this._reset(1);}};/** 暴露调用 */window.CCD = function(ids){if ( ids && ids instanceof Array && ids.length>=2 ){return new Cascading(ids);}};})()

点击此处下载demo