JQuery实现省市区的三级联动_Jquery

 1 <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 5 <title>insert title here</title>
 6 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7 <script type="text/javascript">
 8     /*添加省*/
 9     var province=["湖北省","吉林省","河北省","海南省"];
10     $(document).ready(function(){
11         //当文档加载结束在div标签后添加select列表
12         $("div").after("<select><option>请选择省</option></select>");
13         $("select").attr("id","pro");
14         for(var i = 0; i < province.length; i++){
15             //获取select标签下的最后一个option标签并在后面不断添加option选项直到循环结束
16             $('#pro option:last').after("<option>"+province[i]+"</option");
17         }
18     })
19     /*添加市*/
20     var city=[
21         ["襄阳市","武汉市","荆州市"],
22         ["长春市","吉林市","榆树市"],
23         ["唐山市","石家庄市","秦皇岛市"],
24         ["沙市区","荆州区"]
25     ];
26     var town=[
27         [
28             ["襄州区","襄城区","樊城市"],
29             ["武昌区","江汉区","江夏区"],
30             ["襄阳市","武汉市","荆州市"]
31         ],
32         [
33             ["朝阳区","南关区","宽城区"],
34             ["龙潭区","船营区","昌邑区"],
35             ["正阳街道","培英街道","华昌街道"]
36         ],
37         [
38             ["路南区","路北区","古冶区"],
39             ["长安区","桥西区","新华区"],
40             ["海港区","山海关区","北戴河区"]
41         ],
42         [
43             ["秀英区","琼山区","美兰区"],
44             ["西沙群岛","中沙群岛","南沙群岛"],
45             ["海棠区","吉阳区","天涯区"]
46         ]
47     ]
48     $(document).ready(function(){
49         //当文档加载结束在div标签后添加select列表
50         $("#pro").after("<select><option>请选择市</option></select");
51         $("select:contains(请选择市)").attr("id","cit");
52         $("#cit").after("<select><option>请选择区</option></select");
53         $("select:contains(请选择区)").attr("id","two");
54         $("#pro option").click(function(){
55             var indexo=$("option").index($(this));
56             if(indexo == 0){
57                 //替换原来select中的内容
58                 $("#cit").replacewith("<select><option>请选择市</option></select");
59                 //此处会将select的id属性清空，故需要再次赋给id属性
60                 $("select:contains(请选择市)").attr("id","cit");
61                 $("#two").replacewith("<select><option>请选择区</option></select");
62                 $("select:contains(请选择区)").attr("id","two");
63             }
64             else{
65                 var cityy = city[indexo-1];
66                 var townn = town[indexo-1];
67                 var townl = townn[0];
68                 //清空样式
69                 $("#two").empty();
70                 $("#cit").empty();
71                 console.log(townn);
72                 for(var i = 0; i < cityy.length; i++){
73                     $('#cit').append("<option>"+cityy[i]+"</option");
74                 }
75                 for(var i = 0; i < townl.length; i++){
76                     //当未选择市的时候，自动将第一个市下的区放入select中
77                     $('#two').append("<option>"+townl[i]+"</option");
78                 }
79                 $("#cit option").click(function(){
80                     var indext=$("#cit option").index($(this));
81                     var townm = townn[indext];
82                     $("#two").empty();
83                     for(var i = 0; i < townm.length; i++){
84                         $('#two').append("<option>"+townm[i]+"</option");
85                     }
86                 })
87             }
88         })
89     })
90 </script>
91 </head>
92 <body>
93 <div></div>
94 </body>
95 </html>

实现结果：