最近有空用jquery做了一个全国省市县的三级联动，在以后或许可以用的到 ，遗憾的是我还没用封装，等有空看能不能封装成一个插件
废话不多说，贴上代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>下拉框</title>
6 <script src="city.js"></script>
7 <script src="jquery-1.11.3.js"></script>
8 <style>
9 div{
10 width:500px;
11 margin:0 auto;
12 text-align:center;
13 }
14 select{
15 width:100px;
16 }
17 </style>
18 </head>
19 <body>
20 <div>
21 <h1>全国省市县三级联动</h1>
22 <select id="province">
23 <option value="省份（市）">省份（市）</option>
24 </select>
25 <select id="city">
26 <option value="市（区）">市（区）</option>
27 </select>
28 <select id="county">
29 <option value="县、镇">县、镇</option>
30 </select>
31 </div>
32 <script>
33 var cityAll=city.citylist;
34 $.each(cityAll,function(i,n){
35 $("#province").append(‘<option value="‘+ n.p + ‘">‘ + n.p + ‘</option>‘);
36 });
37 $("#province,#city").change(function(){
38 if($(this).attr("id") == "province"){
39 $("#city").html("").append(‘<option value="市（区）">市（区）</option>‘).next().html("").append(‘<option value="县、镇">县、镇</option>‘);
40 }else{
41 $("#county").html("").append(‘<option value="县、镇">县、镇</option>‘);
42 }
43 $.each(cityAll,function(j,k){
44 if($("#province").val() == k.p){
45 $.each(k.c,function(l,m){
46 $("#city").append(‘<option value="‘+ m.n + ‘">‘ + m.n + ‘</option>‘);
47 if(m.a){
48 $("#county").show();
49 if($("#city").val() == m.n){
50 $.each(m.a,function(e,f){
51 $("#county").append(‘<option value="‘+ f.s + ‘">‘ + f.s + ‘</option>‘);
52 });
53 }
54 }else{
55 $("#county").hide();
56
57 }
58 });
59 }
60 });
61 });
62
63 </script>
64 </body>
65 </html>
做出来的效果就是：
全国省市县三级联动
省份（市）
市（区）
县、镇
好吧 ，我试着把js什么的也导进去，发现没效果，如果有想看的可以去下面我的云盘里面下载，如果有什么好的建议，也欢迎大家提出
链接: https://pan.baidu.com/s/1geZh41X 密码: 2zdq
时间： 2024-12-29 07:06:18