JQ实现省市联动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>省市联动</title>
 6         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 7         <script>
 8             $(function(){
 9                 $("#province").change(function(){
10                     var cityArray = [["南京","苏州","无锡","常州"],["广州","深圳","东莞","惠州"],["杭州","宁波","温州","绍兴"]];
11                     var cities = cityArray[this.value];
12                     //清空select标签子元素方法一JS
13                     $("#city")[0].options.length=0;
14                     //清空select标签子元素方法二JQ
15                     $("#city").empty();
16                     $.each(cities, function(i,n) {
17                         $("#city").append("<option>" + n + "</option>");
18                     });
19                 });
20             });
21         </script>
22     </head>
23     <body>
24         <div>
25             <select id="province">
26                 <option value="-1">--请选择--</option>
27                 <option value="0">江苏省</option>
28                 <option value="1">广东省</option>
29                 <option value="2">浙江省</option>
30             </select>
31             <select id="city"></select>
32         </div>
33     </body>
34 </html>

 

posted @ 2020-04-11 09:13  yxfyg  阅读(327)  评论(0)    收藏  举报