二级联动：
html代码：
1 <body> 2 <select id="province" onchange="getCity(this.options.selectedIndex)"> 3 <option>请选择</option> 4 <option>广东</option> 5 <option>广西</option> 6 </select>省 7 <select id="city"> 8 <option>请选择</option> 9 </select>市 10 </body>
js代码：
1 var citys=[ 2 ["广州","佛山","深圳"], 3 ["柳州","桂林"] 4 ]; 5 function getCity(index){ 6 var city=document.getElementById('city'); 7 var showCity=citys[index-1]; 8 city.length=1; 9 for(var i=0;i<showCity.length;i++){ 10 city.options[i+1]=new Option(showCity[i]); 11 } 12 }
三级联动：
html代码：
1 <body> 2 <select id="province" onchange="getCity()"> 3 <option>请选择</option> 4 <option>广东</option> 5 <option>广西</option> 6 </select>省 7 <select id="city" onchange="getArea()"> 8 <option>请选择</option> 9 </select>市 10 <select id="area"> 11 <option>请选择</option> 12 </select>区 13 </body>
js代码：
1 var city = [ 2 ["广州", "朝阳", "潮州", "汕头"], 3 ["柳州", "桂林"] 4 ]; 5 var areaa = [ 6 [ 7 ["花都", "越秀", "荔湾", "天河", "海珠", "增城", "从化"], 8 ["双塔", "龙城"], 9 ["湘桥", "潮安"], 10 ["龙湖", "濠江", "朝南", "澄海"] 11 ], 12 [ 13 ["柳江", "柳南", "柳北"], 14 ["叠彩", "秀峰", "七星", "雁山", "临桂"] 15 ] 16 ]; 17 18 function getCity() { 19 var prov = document.getElementById("province"); 20 var ci = document.getElementById("city"); 21 var ar = document.getElementById('area'); 22 var provinceCity = city[prov.selectedIndex - 1]; 23 ci.length = 1; //为了处理数组切换时数据错乱 24 if(prov.selectedIndex != 0) { 25 for(var i = 0; i < provinceCity.length; i++) { 26 ci[i + 1] = new Option(provinceCity[i]); 27 //以下写法也可以 28 //ci.options[i+1]=new Option(provinceCity[i]); 29 } 30 } 31 ar.length = 1; 32 } 33 34 function getArea() { 35 var prov = document.getElementById("province"); 36 var ar = document.getElementById('area'); 37 var ci = document.getElementById("city"); 38 var provinceCityArea = areaa[prov.selectedIndex - 1][ci.selectedIndex - 1]; 39 ar.length = 1; //为了处理数组切换时数据错乱 40 if(ci.selectedIndex != 0) { 41 for(var i = 0; i < provinceCityArea.length; i++) { 42 ar[i + 1] = new Option(provinceCityArea[i]); 43 } 44 } 45 46 }