JS实现省市联动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>省市联动</title>
 6         <script>
 7             function selectCity(){
 8                 var cityArray = [["南京","苏州","无锡","常州"],["广州","深圳","东莞","惠州"],["杭州","宁波","温州","绍兴"]];
 9                 var province = document.getElementById("province");
10                 var city = document.getElementById("city");
11                 city.options.length = 0;
12                 for(var i=0;i<cityArray[province.value].length;i++){
13                     var cityOption = document.createElement("option");
14                     var cityName = document.createTextNode(cityArray[province.value][i]);
15                     cityOption.appendChild(cityName);
16                     city.appendChild(cityOption);
17                 }
18             }
19         </script>
20     </head>
21     <body>
22         <div>
23             <select id="province" onchange="selectCity()">
24                 <option value="-1">--请选择--</option>
25                 <option value="0">江苏省</option>
26                 <option value="1">广东省</option>
27                 <option value="2">浙江省</option>
28             </select>
29             <select id="city"></select>
30         </div>
31     </body>
32 </html>

 

posted @ 2020-04-08 11:00  yxfyg  阅读(377)  评论(0)    收藏  举报