首页 > 代码库 > js基于json的级联下拉框
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的级联下拉框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。