级联下拉列表

 前不久有一个朋友问我有没有现成的级联下拉列表实现（虽然建议他自己写一个，但我还是又写了一遍），应用中经常会用到，google或baidu一下其实就有许多好例子。虽然如此，也希望自己能为程式世界尽点微博之力，贴出一段实现二层级联的javascript代码，希望能对有此需求的人有所帮助，谢谢。

 

 <script type="text/javascript">//第二级：var secondlayer1=[ {value:"second_1_xxx1", text:"second_1_xxxx1"}, {value:"second_1_xxx2", text:"second_1_xxxx1", selected:true}, {value:"second_1_xxx3", text:"second_1_xxxx2"}, {value:"second_1_xxx4", text:"second_1_xxxx3"}];var secondlayer2=[ {value:"second_2_xxx1", text:"second_2_xxxx1"}, {value:"second_2_xxx2", text:"second_2_xxxx1"}, {value:"second_2_xxx3", text:"second_2_xxxx2", selected:true}, {value:"second_2_xxx4", text:"second_2_xxxx3"}];var secondlayer3=[ {value:"second_3_xxx1", text:"second_3_xxxx1"}, {value:"second_3_xxx2", text:"second_3_xxxx1", selected:true}, {value:"second_3_xxx3", text:"second_3_xxxx2"}, {value:"second_3_xxx4", text:"second_3_xxxx3"}];var secondlayer4=[ {value:"second_4_xxx1", text:"second_4_xxxx1"}, {value:"second_4_xxx2", text:"second_4_xxxx1"}, {value:"second_4_xxx3", text:"second_4_xxxx2"}, {value:"second_4_xxx4", text:"second_4_xxxx3", selected:true}];//第一级：var toplayer=[ {value:"xxx1", text:"xxxx1", next:secondlayer1}, {value:"xxx2", text:"xxxx2", next:secondlayer2}, {value:"xxx3", text:"xxxx3", next:secondlayer3, selected:true}, {value:"xxx4", text:"xxxx4", next:secondlayer4}]; var topElcr; //toplayerSelector; var secondElcr; //secondlayerSelector; window.onload=function(){ topElcr = document.getElementById("toplayerSelector"); secondElcr = document.getElementById("secondlayerSelector"); /* 构建第一层 */ for(var i in toplayer){ var o = toplayer[i]; var opt = new Option(o.text,o.value); opt.selected=o.selected?true:false; topElcr.options.add(opt); } /* 构建默认选中的下一层 */ selectAndBuildNextLayer(); } function selectAndBuildNextLayer(){ var opts = secondElcr.options; /* 清除第二层数据 */ for(var i=opts.length-1;i>=1;i--)opts[i]=null; var index = topElcr.selectedIndex-1; /* 如果没有选择任何项目，返回 */ if(index<0)return; /* 构建下一层 */ var secondlayer = toplayer[index].next; for(var i in secondlayer){ var o = secondlayer[i]; var opt = new Option(o.text,o.value); opt.selected=o.selected?true:false; opts.add(opt); } }</script><select id="toplayerSelector" name="toplayerSelector" onchange="selectAndBuildNextLayer()"> <option value="">请选择...</option></select><select id="secondlayerSelector" name="secondlayerSelector"> <option value="">请选择...</option></select> 

 

第一级（toplayer）要放在第二级的下面，next属性才能正常复制。

每一层的数据全是标准JSON格式数据，可很方便的修改来通过AJAX从服务器动态取出下一级数据，而且稍加修改就可支持3联或N联。