经常碰到这样的需求，如省市_城市_乡镇下拉框。后一个下拉框的内容会根据前一个的改变而改变，之前的解决方法往往是在前一个改变的时候，向后台发送请求临时获取对应的内容。这样每触发一次就会网络请求一次，这种方法显然不甚合理，下面使用下拉js实现的联动下拉框，只需要在页面加载的时候将数据准备好，根据数据key值的巧妙设置来实现联动。
联动下拉框的html代码
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>下拉框联动效果</title> <script src="js/mySelects.js"></script> </head> <body> <div id="div1"></div> </body> </html>
联动下拉框的js代码
document.addEventListener('DOMContentLoaded',function(){ console.log('domContentLoaded'); var mySels=new Sels({'id':'div1','level':'3'}); //第一级下拉框的数据 mySels.add('1',['1','2','3']); //第二级下拉框的数据，1_i对应第一级下拉框第i个选中项 mySels.add('1_1',['1_1','1_2','1_3']); mySels.add('1_2',['2_1','2_2','2_3']); mySels.add('1_3',['3_1','3_2','3_3']); //第三级下拉框的数据，1_i_j对应第一级下拉框第i个选中项，第二级下拉框第j个选中项的数据 mySels.add('1_1_1',['1_1_1','1_1_2','1_1_3']); mySels.add('1_1_2',['1_2_1','1_2_2','1_2_3']); mySels.add('1_1_3',['1_3_1','1_3_2','1_3_3']); mySels.add('1_2_1',['2_1_1','2_1_2','2_1_3']); mySels.add('1_2_2',['2_2_1','2_2_2','2_2_3']); mySels.add('1_2_3',['2_3_1','2_3_2','2_3_3']); mySels.add('1_3_1',['3_1_1','3_1_2','3_1_3']); mySels.add('1_3_2',['3_2_1','3_2_2','3_2_3']); mySels.add('1_3_3',['3_3_1','3_3_2','3_3_3']); mySels.init(this.level); },false); //联动下拉菜单对应的类,level代表多少级下拉菜单 function extendOptions(oldOpt,newOpt){ //如果没有就添加，如果有就替换 for(var key in newOpt){ oldOpt[key]=newOpt[key]; } } /** *option 构造联动下拉菜单的初始化参数，其中以下两项是必须的： *id:联动下拉菜单父元素的id *level:联动下拉菜单包含几级下拉菜单 */ function Sels(option){ extendOptions(this,option); this.oParent=document.getElementById(this.id); this.data={}; //构造函数没有执行完，对象还未创建，因此不能调用相关函数? this.selects=this.oParent.getElementsByTagName('select'); } Sels.prototype={ constructor:Sels, add:function(key,value){ this.data[key]=value; }, init:function(level){ var that=this; for(var i=1;i<=this.level;i++){ var oSel=document.createElement('select'); var oOpt=new Option('默认','默认'); oSel.add(oOpt,undefined); oSel.index=i; //为其指定change事件 oSel.addEventListener('change',function(){ //内部函数的this指向的是当前的select对象 that.change(this.index); },false); this.oParent.appendChild(oSel); } //为第一个下拉框添加选项 var arr=this.data['1']; for(i=0,len=arr.length;i<len;i++){ oOpt=new Option(arr[i],arr[i]); this.selects[0].add(oOpt,undefined); } }, //index代表当前发生change事件是在第几级下拉框，其后的下拉框需要对该事件做出相应 change:function(index){ var str='1'; for(var i=0;i<index;i++){ str+='_'+this.selects[i].options.selectedIndex; } if(this.data[str]){ this.selects[index].options.length=1; var arr=this.data[str]; for(var i=0;i<arr.length;i++){ var oOpt=new Option(arr[i],arr[i]); this.selects[index].add(oOpt,undefined); } this.selects[index].options[1].selected=true; //之后的一次联动 index++; if(index<this.selects.length){ this.change(index); } }else{ //说明选择的是默认 //此时，将后面的选项都仅保留“默认”这一项即可 for(var i=index;i<this.selects.length;i++){ this.selects[i].options.length=1; } } }, };
相关知识点整理：
1.利用data的key值来实现联动
2.面向对象的思路