AJAX-简单的省市县三级联动
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ajax省市县三级联动</title> 6 </head> 7 <body> 8 <select style="width: 102px;" id="pre" onchange="changeCity(this);"> 9 <option value=" ">--请选择省--</option> 10 </select> 11 <select style="width: 102px;" id="city" onchange="changeArea(this)";> 12 <option value=" ">--请选择市--</option> 13 </select> 14 <select style="width: 102px;" id="area"> 15 <option value=" ">--请选择县--</option> 16 </select> 17 </body> 18 <script> 19 var pres = ["北京", "吉林", "山东"]; 20 21 var cities = [ 22 ["东城", "昌平", "海淀"], 23 ["长春", "吉林"], 24 ["济南", "青岛"] 25 ]; 26 27 var areas = [ 28 [ 29 ["东城1", "东城2", "东城3"], 30 ["昌平1", "昌平2", "昌平3"], 31 ["海淀1", "海淀2", "海淀3"] 32 ], 33 [ 34 ["长春1", "长春2"], 35 ["吉林1", "吉林2", "吉林3"] 36 ], 37 [ 38 ["济南1", "济南2"], 39 ["青岛1", "青岛2"] 40 ] 41 ]; 42 //设置一个省的公共下标 43 var pIndex = -1; //-1表示未被选中的状态 44 var preEle = document.getElementById("pre"); 45 var cityEle = document.getElementById("city"); 46 var areaEle = document.getElementById("area"); 47 //先设置省 48 for (var i = 0; i < pres.length; i++) { 49 //创建节点: pres[i]->表示文本、 i->表示value 50 var myOption = new Option(pres[i], i); 51 //将元素添加到指定的节点(preEle放到myOption处) 52 preEle.options.add(myOption); 53 } 54 function changeCity(obj) { 55 //先清空(如果不想让cityEle、areaEle自动补全、则要将length=0->length=1) 56 cityEle.options.length = 0; 57 areaEle.options.length = 0; 58 //获取值 59 var val = obj.value; 60 //window.alert(val); //值为:0->北京、 1->吉林、2->山东 61 pIndex = obj.value; //这里先捆绑0、1、2 62 //获取cities 63 var cs = cities[val]; 64 // window.alert(cs); //北京->东城,昌平,海淀 65 //获取默认区 66 var as = areas[val][0]; 67 68 for (var i = 0; i < cs.length; i++) { 69 var myOption = new Option(cs[i], i); 70 cityEle.options.add(myOption); 71 } 72 for (var i = 0; i < as.length; i++) { 73 var myOption = new Option(as[i], i); 74 areaEle.options.add(myOption); 75 } 76 } 77 function changeArea(obj) { 78 var val = obj.value; 79 //window.alert(val); //吉林:0->长春、1->吉林 80 var as = areas[pIndex][val]; 81 //window.alert(pIndex); //这里释放0、1、2 82 //先清空 83 areaEle.options.length = 0; //(如果不想让cityEle、areaEle自动补全、则要将length=0->length=1) 84 for (var i = 0; i < as.length; i++) { 85 var myOption = new Option(as[i], i); 86 areaEle.options.add(myOption); 87 } 88 } 89 </script> 90 </html>
效果图
