JavaScript基础4——省市联动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>省市联动</title> 6 </head> 7 <body> 8 <select id="province" onchange="changeProvince(this.value)"> 9 <option value="0">-- 请选择 --</option> 10 <option value="北京">北京</option> 11 <option value="重庆">重庆</option> 12 <option value="广东">广东</option> 13 </select> 14 <select id="city"> 15 16 </select> 17 </body> 18 <script type="text/javascript"> 19 // 获取city 20 var city = document.getElementById("city"); 21 // 创建一个数组存储数据 22 // 二维数组 23 var arr = new Array(3); 24 arr[0] = ["北京", "中关村", "朝阳区"]; 25 arr[1] = ["重庆", "梁平", "万州"]; 26 arr[2] = ["广东", "广州", "东莞"]; 27 function changeProvince(val) { 28 // 清空city 29 if (city.length > 0) { 30 var cities = city.getElementsByTagName("option"); 31 for (var i = 0; i < cities.length; i++) { 32 city.remove(cities[i]); 33 i--; 34 } 35 } 36 for (var i = 0; i < arr.length; i++) { 37 var arrx = arr[i]; 38 // 得到数组的第一个值 39 var province = arrx[0]; 40 if (province == val) { 41 // 遍历arrx 42 for (var j = 1; j < arrx.length; j++) { 43 // 得到城市的名称 44 var p = arrx[j]; 45 // 创建option 46 var option = document.createElement("option"); 47 var text = document.createTextNode(p); 48 option.appendChild(text); 49 // 添加option到city 50 city.appendChild(option); 51 } 52 } 53 } 54 } 55 </script> 56 </html>
