今天上午，写了一个多级联动下拉菜单，在这里分享给大家（经过调试已经兼容ie,ff浏览器）：
1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style type="text/css"> 8 #cunt{ width: 200px;} 9 #city{ width: 200px} 10 #xian{ width:200px;} 11 12 13 14 15 16 17 18 </style> 19 20 <script type="text/javascript"> 21 window.onload=function(){ 22 23 24 25 26 27 28 29 function Createselect(id1,id2,id3,json){ 30 //数据 31 this.cunty=json[id1]; 32 this.city=json[id2]; 33 this.xian=json[id3]; 34 35 //选择框 36 this.cunbox=document.getElementById(id1); 37 this.citbox=document.getElementById(id2); 38 this.xiabox=document.getElementById(id3); 39 this.ts="---请选择---"; 40 } 41 42 Createselect.prototype={ 43 init:function(){ 44 this.cunbox.options[0]=new Option(this.ts); 45 this.citbox.options[0]=new Option(this.ts); 46 this.xiabox.options[0]=new Option(this.ts); 47 this.createCun(); 48 this.createCity(-1); 49 this.createXian(-1,-1); 50 }, 51 createCun:function(){ 52 var This=this; 53 for(var i=0;i<This.cunty.length;i++){ 54 This.cunbox.options[i+1]=new Option(This.cunty[i],This.cunty[i]); 55 } 56 This.cunbox.onchange=function(){ 57 This.createCity(This.cunbox.selectedIndex); 58 This.createXian(-1,-1); 59 } 60 61 }, 62 createCity:function(num){ 63 var This=this; 64 if(num<=0){ 65 This.citbox.length=1; 66 This.citbox.disabled=true; 67 This.citbox.options[0]=new Option(This.ts) 68 }else{ 69 This.citbox.length=1; 70 This.citbox.disabled=false; 71 var cit=This.cunty[num-1]; 72 var arr=This.city[cit]; 73 for(var i=0;i<arr.length;i++){ 74 This.citbox.options[i+1]=new Option(arr[i],arr[i]); 75 } 76 77 } 78 This.citbox.onchange=function(){ 79 This.createXian(num,This.citbox.selectedIndex); 80 } 81 82 }, 83 createXian:function(snum,xin){ 84 var This=this; 85 if(snum<=0||xin<=0){ 86 This.xiabox.length=1; 87 This.xiabox.disabled=true; 88 This.xiabox.options[0]=new Option(This.ts) 89 return; 90 }else{ 91 This.xiabox.length=1; 92 This.xiabox.disabled=false; 93 var qnum=snum-1; 94 var sxin=xin-1; 95 var cit=This.city[This.cunty[qnum]][sxin]; 96 var arr=This.xian[qnum][cit]; 97 for(var i=0;i<arr.length;i++){ 98 This.xiabox.options[i+1]=new Option(arr[i],arr[i]); 99 } 100 } 101 //获取值 102 This.xiabox.onchange=function(){ 103 alert(This.getValue()); 104 } 105 106 }, 107 getValue:function(){ 108 var This=this; 109 var val=This.cunbox.value+","+This.citbox.value+","+This.xiabox.value; 110 return val; 111 } 112 113 114 115 } 116 117 118 119 /* 120 121 数据一共分为3级并且每一级的数据要一一对应，每一级的数据名字于对应id名字相同。 122 123 124 */ 125 126 var json={ 127 cunt:["北京","上海"],//第一级 128 129 city :{ //第二级 130 131 "北京":["海淀","延庆","朝阳","丰台"], 132 "上海":["浦东","浦西","虹口","外滩"] 133 }, 134 135 xian:[ //第三级 136 137 { 138 "海淀":["海淀上","海淀下","海淀中"], 139 "延庆":["延庆上","延庆下","延庆中","延庆下下","延庆中中"], 140 "朝阳":["朝阳上","朝阳下","朝阳中"], 141 "丰台":["丰台上","丰台下","丰台中","丰台中中"] 142 143 }, 144 { 145 "浦东":["浦东上","浦东下","浦东中"], 146 "浦西":["浦西上","浦西下","浦西中"], 147 "虹口":["虹口上","虹口下","虹口中","虹口上上","虹口下下","虹口中中"], 148 "外滩":["外滩上","外滩下","外滩中"] 149 } 150 151 152 ] 153 }; 154 155 var cres=new Createselect("cunt","city","xian",json); 156 cres.init(); 157 158 } 159 </script> 160 161 </head> 162 <body> 163 164 165 <select id="cunt"></select> 166 <select id="city"></select> 167 <select id="xian"></select> 168 169 </body> 170 </html>