静态四级联动下拉菜单 感兴趣的来交流下~
纯JS，用了大概140行，感觉有点多，谁有更简洁的一起交流下吧~
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>静态四级联动下拉菜单</title><script> //页面载入时初始化window.onload = function(){ var arrSel=["one","two","three","four"];//定义各下拉框的Id，要与html里的一致 var i=0,arrData=[]; arrData[i++]=["A","A1","A11","0"] //定义全部下拉项 arrData[i++]=["A","A1","A12","1"] arrData[i++]=["A","A2","A21","2"] arrData[i++]=["A","A2","A22","3"] arrData[i++]=["B","B1","B11","4"] arrData[i++]=["B","B1","B12","5"] arrData[i++]=["B","B2","B21","6"] arrData[i++]=["B","B2","B22","7"] arrData[i++]=["C","C1","C11","8"] arrData[i++]=["C","C2","C21","9"] arrData[i++]=["C","C3","C31","0"] //初始化list1 var list1=document.getElementById(arrSel[0]); for (i=0;i<arrData.length;i++) { if(i<arrData.length-1 && arrData[i][0]==arrData[i+1][0]) continue; var option=document.createElement("option"); option.value = arrData[i][0]; option.innerHTML = arrData[i][0]; list1.appendChild(option); } //初始化list2 var list2=document.getElementById(arrSel[1]); for (i=0;i<arrData.length;i++) { if(arrData[i][0]!= list1[0].text ) break; if(arrData[i][0]==arrData[i+1][0] && arrData[i][1]==arrData[i+1][1]) continue; var option=document.createElement("option"); option.value = arrData[i][1]; option.innerHTML = arrData[i][1]; list2.appendChild(option); } //初始化list3 var list3=document.getElementById(arrSel[2]); for (i=0;i<arrData.length;i++) { if(arrData[i][1]!= list2[0].text ) break; if(arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue; var option=document.createElement("option"); option.value = arrData[i][2]; option.innerHTML = arrData[i][2]; list3.appendChild(option); } //初始化list4 var list4=document.getElementById(arrSel[3]); for (i=0;i<arrData.length;i++) { if(arrData[i][2]!= list3[0].text ) break; if(arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue; var option=document.createElement("option"); option.value = arrData[i][3]; option.innerHTML = arrData[i][3]; list4.appendChild(option); } //list1改变时触发 list1.onchange= function(){ list2.length=0; list3.length=0; list4.length=0; //list2 var selectedText1=list1[list1.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][0]!= selectedText1) continue; if(i<arrData.length-1 && arrData[i][0]==arrData[i+1][0] && arrData[i][1]==arrData[i+1][1]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][1]; list2.appendChild(option); } //list3 var selectedText2=list2[list2.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][0]!= selectedText1 || arrData[i][1]!= selectedText2) continue; if(i<arrData.length-1 && arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][2]; list3.appendChild(option); } //list4 var selectedText3=list3[list3.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][0]!= selectedText1 || arrData[i][1]!= selectedText2 || arrData[i][2]!= selectedText3) continue; if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][3]; list4.appendChild(option); } } //list2改变时触发 list2.onchange= function(){ list3.length=0; list4.length=0; //list3 var selectedText2=list2[list2.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][1]!= selectedText2) continue; if(i<arrData.length-1 && arrData[i][1]==arrData[i+1][1] && arrData[i][2]==arrData[i+1][2]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][2]; list3.appendChild(option); } //list4 var selectedText3=list3[list3.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][1]!= selectedText2 || arrData[i][2]!= selectedText3) continue; if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][3]; list4.appendChild(option); } } //list3改变时触发 list3.onchange= function(){ list4.length=0; //list4 var selectedText3=list3[list3.selectedIndex].text; for (i=0;i<arrData.length;i++) { if(arrData[i][2]!= selectedText3) continue; if(i<arrData.length-1 && arrData[i][2]==arrData[i+1][2] && arrData[i][3]==arrData[i+1][3]) continue; var option=document.createElement("option"); option.innerHTML = arrData[i][3]; list4.appendChild(option); } } }</script></head><body >静态的四级联动，感觉代码有点长了，谁有更简洁的代码,交流下~~ <br/>QQ:1140215489 <br/> <br/><select id="one" name=one> </select> <select id="two" name=two> </select> <select id="three" name=three> </select> <select id="four" name=four> </select> </body></html>
[解决办法]
稍微有点不一样,C没有实现,原理一样的
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <SCRIPT LANGUAGE="JavaScript"> <!-- // 数据源 var dataOneTwo = {"rows":[ {"text":"A",value:0,"items":[{"text":"A1",value:1},{"text":"A2",value:2}]} ,{"text":"B",value:3,"items":[{"text":"B1",value:4},{"text":"B2",value:5}]} ,{"text":"C",value:6,"items":[{"text":"C1",value:7},{"text":"C2",value:8}]} ]} var dataTwoThree = {"rows":[ {"text":"A1",value:1,"items":[{"text":"A11",value:10},{"text":"A12",value:11}]} ,{"text":"A2",value:2,"items":[{"text":"A21",value:12},{"text":"A22",value:13}]} ,{"text":"B1",value:4,"items":[{"text":"B11",value:14},{"text":"B12",value:15}]} ,{"text":"B2",value:5,"items":[{"text":"B21",value:16},{"text":"B22",value:17}]} ]} var dataThreeFour = {"rows":[ {"text":"A11",value:10,"items":[{"text":"0",value:18}]} ,{"text":"A12",value:11,"items":[{"text":"2",value:19}]} ,{"text":"B11",value:14,"items":[{"text":"4",value:20}]} ,{"text":"B12",value:15,"items":[{"text":"6",value:21}]} ,{"text":"A21",value:12,"items":[{"text":"1",value:22}]} ,{"text":"A22",value:13,"items":[{"text":"3",value:23}]} ,{"text":"B21",value:16,"items":[{"text":"5",value:24}]} ,{"text":"B22",value:17,"items":[{"text":"7",value:25}]} ]} window.onload=function(){ bindData("one",dataOneTwo.rows); bindEvent(); } // 绑定数据 function bindData(selDomId,items){ var sel = document.getElementById(selDomId); var opts = sel.options; sel.innerHTML = ''; opts.add(new Option("--请选择--","")) for(var i=0,len=items.length;i<len;i++){ opts.add(new Option(items[i].text,items[i].value)) } } function bindEvent(){ bindSelectEvent("one",dataOneTwo,"two"); bindSelectEvent("two",dataTwoThree,"three"); bindSelectEvent("three",dataThreeFour,"four"); } // 绑定select事件 function bindSelectEvent(domId,srcData,childId){ var sel = document.getElementById(domId); sel.onchange=function(){ var items = findChild(this,srcData); bindData(childId,items); } } // 找到子节点数据 function findChild(dom,srcData){ var rows = srcData.rows; var value = dom.value; for(var i=0,len=rows.length;i<len;i++){ if(value == rows[i].value){ return rows[i].items; } } return []; } //--> </SCRIPT> </HEAD> <BODY> <select id="one" name=one> </select> <select id="two" name=two> </select> <select id="three" name=three> </select> <select id="four" name=four> </select> </BODY></HTML>
[解决办法]
无限级
除去公共方法
30行
- HTML code
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Selects</title><style type="text/css">*{font-size:14px;}select{height:20px;font-size:12px;}</style> </head><body ><div style='color:red'>2级联动</div><div id='demo1'></div><br><br><br><div style='color:red'>3级联动</div><div id='demo2'></div><br><br><br><div style='color:red'>4级联动</div><div id='demo3'></div><br><br><br><div style='color:red'>5级联动</div><div id='demo4'></div><br><br><br><script language="javascript">var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s;})(navigator.userAgent.toLowerCase());Sys.IE6&&document.execCommand("BackgroundImageCache", false, true); function $(Id){ return document.getElementById(Id);};function $$(p,e){ return p.getElementsByTagName(e);};function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);};function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);};var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); };};var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); };};var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; };};var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class;};//=================var Selects = new Class({ initialize :function(container,data,title){ this.container = container; this.num = title.length; this.Events = new Array(title.length-1); var i,l,select; for(i=0; i<this.num ; i++) { container.innerHTML = container.innerHTML + " " + title[i]; container.appendChild(document.createElement('select')); } select = $$(container,'select')[0]; for(i=0,l=data.length;i<l;i++) select.options.add(new Option(data[i].txt,i)); addListener(select,'change',Bind(this,this.Change,select,data,0)); this.Change(select,data,0); }, Change : function(obj,data,num){ if(num == this.num-1)return; var menu = data[obj.value].menu; select = $$(this.container,'select')[num+1]; select.length = 0; if(!menu)return; if(this.Events[num]!=undefined)removeListener(select,'change',this.Events[num]) this.Events[num] = Bind(this,this.Change,select,menu,num+1) addListener(select,'change',this.Events[num]); for(var i=0,l=menu.length;i<l;i++) select.options.add(new Option(menu[i].txt,i)); this.Change(select,menu,num+1); }});//=================window.onload = function(){ var data=[{"txt":"人族","menu":[{"txt":"大法师","menu":[{"txt":"大法技能","menu":[{"txt":"水元素","menu":[{"txt":"召唤物"},{"txt":"穿刺攻击"},{"txt":"很好东西"}]},{"txt":"暴风雪","menu":[{"txt":"魔法攻击"},{"txt":"面积伤害"},{"txt":"很漂亮"},{"txt":"可被打断"}]},{"txt":"辉煌光环"},{"txt":"瞬间移动"}]},{"txt":"英雄说明","menu":[{"txt":"智力英雄"},{"txt":"强大光环"},{"txt":"辅助型"},]}]},{"txt":"山丘之王","menu":[{"txt":"山丘技能","menu":[{"txt":"风暴之锤"},{"txt":"锥地"},{"txt":"锥晕"},{"txt":"天神下凡"}]},{"txt":"英雄说明","menu":[{"txt":"力量英雄"},{"txt":"秒杀能力"},{"txt":"个子很矮"},{"txt":"大技变态"}]}]},{"txt":"圣骑士","menu":[{"txt":"圣骑技能","menu":[{"txt":"光"},{"txt":"无敌"},{"txt":"光环"},{"txt":"复活"}]},{"txt":"英雄说明","menu":[{"txt":"力量英雄"},{"txt":"辅助英雄"},{"txt":"人称奶妈"}]}]},{"txt":"血法师","menu":[{"txt":"血法技能","menu":[{"txt":"火焰"},{"txt":"吸蓝"},{"txt":"虚无"},{"txt":"神鸟凤凰"}]},{"txt":"英雄说明","menu":[{"txt":"智力英雄"},{"txt":"辅助英雄"},{"txt":"长的很帅"}]}]}]},{"txt":"兽族","menu":[{"txt":"贱圣","menu":[{"txt":"贱圣技能","menu":[{"txt":"疾风步"},{"txt":"影分身"},{"txt":"致命一击"},{"txt":"剑刃风暴"}]},{"txt":"英雄说明","menu":[{"txt":"敏捷英雄"},{"txt":"高攻英雄"},{"txt":"杀人越货"},{"txt":"猥亵无敌"},{"txt":"非常强大"}]}]},{"txt":"先知男","menu":[{"txt":"先知技能","menu":[{"txt":"狼"},{"txt":"日"},{"txt":"闪电链"},{"txt":"地震"}]},{"txt":"英雄说明","menu":[{"txt":"智力英雄"},{"txt":"骚扰英雄"}]}]},{"txt":"牛头人酋长","menu":[{"txt":"牛头技能","menu":[{"txt":"冲击波"},{"txt":"阵地"},{"txt":"耐久光环"},{"txt":"复活"}]},{"txt":"英雄说明","menu":[{"txt":"力量英雄"},{"txt":"魔法强大"},{"txt":"长的威猛"},{"txt":"一个肉盾"}]}]},{"txt":"小YY","menu":[{"txt":"小Y技能","menu":[{"txt":"变动物"},{"txt":"治疗波"},{"txt":"小蛇棒子"},{"txt":"全体无敌"}]},{"txt":"英雄说明","menu":[{"txt":"敏捷英雄"},{"txt":"魔法强大"},{"txt":"辅助英雄"}]}]}]},{"txt":"不死族","menu":[{"txt":"死亡骑士","menu":[{"txt":"亡骑技能","menu":[{txt:"大便一拓"},{txt:"邪恶光环"},{txt:"死亡契约"},{txt:"复活亡灵"}]},{"txt":"英雄说明","menu":[{txt:"骑的是羊"},{txt:"未老先衰"},{txt:"冰霜之哀"},{txt:"啊而塞思"}]}]},{"txt":"巫妖","menu":[{"txt":"巫妖技能","menu":[{txt:"暴冰"},{txt:"冰甲"},{txt:"契约"},{txt:"死亡凋零"}]},{"txt":"英雄说明","menu":[{txt:"穿裙子"},{txt:"全是骨头"},{txt:"不男不女"}]}]},{"txt":"恐惧魔王","menu":[{"txt":"魔王技能"},{"txt":"英雄说明"}]},{"txt":"小强王子","menu":[{"txt":"王子技能"},{"txt":"英雄说明"}]}]}]; new Selects($('demo1'),data,["种族","英雄"]); new Selects($('demo2'),data,["种族","英雄","介绍"]); new Selects($('demo3'),data,["种族","英雄","介绍","技能"]); new Selects($('demo4'),data,["种族","英雄","介绍","技能","技能说明"]);}</script></body></html>
[解决办法]
建议楼主设计网页，不一定非要大量使用JS不可，还要为一些没装js 的浏览器用户考虑，列表里面的项可以在html里设计，还有就是在此基础上，利用onchange来控制项的显示。。