jquery实现城市选择器效果(二级联动)(demo)

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="http://code.jquery.com/jquery-latest.js"></script>
 7 <script src="city.js"></script>
 8 <script>
 9 $(function(){
10     var city = [
11         {"name":"u5317u4eac","child":["u4e1cu57ce","u897fu57ce","u5d07u6587","u5ba3u6b66","u671du9633","u77f3u666fu5c71","u6d77u6dc0","u95e8u5934u6c9f","u623fu5c71","u901au5dde","u987au4e49","u660cu5e73","u5927u5174","u6000u67d4","u5e73u8c37","u5bc6u4e91","u5ef6u5e86"]},
12         {"name":"u5929u6d25","child":["u548cu5e73","u6cb3u4e1c","u6cb3u897f","u5357u5f00","u6cb3u5317","u7ea2u6865","u5858u6cbd","u6c49u6cbd","u5927u6e2f","u4e1cu4e3d","u897fu9752","u6d25u5357","u5317u8fb0","u6b66u6e05","u5b9du577b","u5b81u6cb3","u9759u6d77","u84dfu53bf"]},
13         {"name":"u4e0au6d77","child":["u9ec4u6d66","u5362u6e7e","u5f90u6c47","u957fu5b81","u9759u5b89","u666eu9640","u95f8u5317","u8679u53e3","u6768u6d66","u95f5u884c","u5b9du5c71","u5609u5b9a","u6d66u4e1cu65b0","u91d1u5c71","u677eu6c5f","u9752u6d66","u5357u6c47","u5949u8d24","u5d07u660e"]},
14         {"name":"u91cdu5e86","child":["u4e07u5dde","u6daau9675","u6e1du4e2d","u5927u6e21u53e3","u6c5fu5317","u6c99u576au575d","u4e5du9f99u5761","u5357u5cb8","u5317u789a","u4e07u76db","u53ccu6865","u6e1du5317","u5df4u5357","u9ed4u6c5f","u957fu5bff","u7da6u6c5f","u6f7cu5357","u94dcu6881","u5927u8db3","u8363u660c","u74a7u5c71","u6881u5e73","u57ceu53e3","u4e30u90fd","u57abu6c5f","u6b66u9686","u5fe0u53bf","u5f00u53bf","u4e91u9633","u5949u8282","u5debu5c71","u5debu6eaa","u77f3u67f1","u79c0u5c71","u9149u9633","u5f6du6c34","u6c5fu6d25","u5408u5ddd","u6c38u5ddd","u5357u5ddd"]},
15         {"name":"u6cb3u5317","child":["u4fddu5b9a","u6ca7u5dde","u627fu5fb7","u5b9au5dde","u9986u9676","u90afu90f8","u8861u6c34","u5ecau574a","u79e6u7687u5c9b","u77f3u5bb6u5e84","u5510u5c71","u90a2u53f0","u5f20u5bb6u53e3","u6b63u5b9a","u8d75u53bf","u5f20u5317"]},
16         {"name":"u6cb3u5357","child":["u5b89u9633","u957fu845b","u9e64u58c1","u7126u4f5c","u6d4eu6e90","u5f00u5c01","u6d1bu9633","u6f2fu6cb3","u660eu6e2f","u5357u9633","u5e73u9876u5c71","u6feeu9633","u5546u4e18","u4e09u95e8u5ce1","u65b0u4e61","u8bb8u660c","u4fe1u9633","u79b9u5dde","u9122u9675","u90d1u5dde","u5468u53e3","u9a7bu9a6cu5e97"]},
17         {"name":"u9ed1u9f99u6c5f","child":["u5927u5e86","u5927u5174u5b89u5cad","u54c8u5c14u6ee8","u9e64u5c97","u9ed1u6cb3","u4f73u6728u65af","u9e21u897f","u7261u4e39u6c5f","u9f50u9f50u54c8u5c14","u4e03u53f0u6cb3","u7ee5u5316","u53ccu9e2du5c71","u4f0au6625"]},
18         {"name":"u5409u6797","child":["u767du57ce","u767du5c71","u957fu6625","u5409u6797","u8fbdu6e90","u677eu539f","u56dbu5e73","u901au5316","u5ef6u8fb9"]},
19         {"name":"u8fbdu5b81","child":["u978du5c71","u672cu6eaa","u671du9633","u5927u8fde","u4e39u4e1c","u629au987a","u961cu65b0","u846bu82a6u5c9b","u9526u5dde","u8fbdu9633","u76d8u9526","u6c88u9633","u94c1u5cad","u74e6u623fu5e97","u8425u53e3"]},
20         {"name":"u5c71u4e1c","child":["u6ee8u5dde","u5fb7u5dde","u4e1cu8425","u83cfu6cfd","u6d4eu5357","u6d4eu5b81","u57a6u5229","u4e34u6c82","u804au57ce","u83b1u829c","u9752u5c9b","u65e5u7167","u6cf0u5b89","u6f4du574a","u5a01u6d77","u70dfu53f0","u6dc4u535a","u67a3u5e84","u7ae0u4e18","u8bf8u57ce"]},
21         {"name":"u5185u8499u53e4","child":["u963fu62c9u5584u76df","u5305u5934","u5df4u5f66u6dd6u5c14u76df","u8d64u5cf0","u9102u5c14u591au65af","u547cu548cu6d69u7279","u547cu4f26u8d1du5c14","u6d77u62c9u5c14","u901au8fbd","u4e4cu6d77","u4e4cu5170u5bdfu5e03","u9521u6797u90edu52d2u76df","u5174u5b89u76df"]},
22         {"name":"u6c5fu82cf","child":["u5e38u5dde","u5927u4e30","u6deeu5b89","u8fdeu4e91u6e2f","u5357u4eac","u5357u901a","u82cfu5dde","u5bbfu8fc1","u6cf0u5dde","u65e0u9521","u5f90u5dde","u626cu5dde","u76d0u57ce","u9547u6c5f"]},
23         {"name":"u5b89u5fbd","child":["u5b89u5e86","u868cu57e0","u4eb3u5dde","u5de2u6e56","u6c60u5dde","u6ec1u5dde","u961cu9633","u5408u80a5","u6deeu5357","u6deeu5317","u9ec4u5c71","u548cu53bf","u970du90b1","u516du5b89","u9a6cu978du5c71","u5bbfu5dde","u94dcu9675","u6850u57ce","u829cu6e56","u5ba3u57ce"]},
24         {"name":"u5c71u897f","child":["u957fu6cbb","u5927u540c","u664bu57ce","u664bu4e2d","u5415u6881","u4e34u6c7e","u4e34u7317","u6e05u5f90","u6714u5dde","u592au539f","u5ffbu5dde","u8fd0u57ce","u9633u6cc9"]},
25         {"name":"u9655u897f","child":["u5b89u5eb7","u5b9du9e21","u6c49u4e2d","u5546u6d1b","u94dcu5ddd","u6e2du5357","u897fu5b89","u54b8u9633","u5ef6u5b89","u6986u6797"]},
26         {"name":"u7518u8083","child":["u767du94f6","u5b9au897f","u7518u5357","u91d1u660c","u5609u5ceau5173","u9152u6cc9","u5170u5dde","u4e34u590f","u9647u5357","u5e73u51c9","u5e86u9633","u5929u6c34","u6b66u5a01","u5f20u6396"]},
27         {"name":"u6d59u6c5f","child":["u676du5dde","u6e56u5dde","u5609u5174","u91d1u534e","u4e3du6c34","u5b81u6ce2","u8862u5dde","u7ecdu5174","u53f0u5dde","u6e29u5dde","u4e49u4e4c","u821fu5c71"]},
28         {"name":"u6c5fu897f","child":["u629au5dde","u8d63u5dde","u4e5du6c5f","u5409u5b89","u666fu5fb7u9547","u5357u660c","u840du4e61","u4e0au9976","u65b0u4f59","u9e70u6f6d","u5b9cu6625","u6c38u65b0"]},
29         {"name":"u6e56u5317","child":["u6069u65bd","u9102u5dde","u9ec4u77f3","u9ec4u5188","u8346u5dde","u8346u95e8","u6f5cu6c5f","u5341u5830","u795eu519cu67b6","u968fu5dde","u5929u95e8","u6b66u6c49","u8944u9633","u5b5du611f","u4ed9u6843","u54b8u5b81","u5b9cu660c"]},
30         {"name":"u6e56u5357","child":["u957fu6c99","u5e38u5fb7","u90f4u5dde","u8861u9633","u6000u5316","u5a04u5e95","u90b5u9633","u6e58u6f6d","u6e58u897f","u5cb3u9633","u6c38u5dde","u76cau9633","u682au6d32","u5f20u5bb6u754c"]},
31         {"name":"u8d35u5dde","child":["u5b89u987a","u6bd5u8282","u8d35u9633","u516du76d8u6c34","u9ed4u4e1cu5357","u9ed4u5357","u9ed4u897fu5357","u94dcu4ec1","u9075u4e49"]},
32         {"name":"u56dbu5ddd","child":["u963fu575d","u5df4u4e2d","u6210u90fd","u5fb7u9633","u8fbeu5dde","u5e7fu5b89","u5e7fu5143","u7518u5b5c","u4e50u5c71","u6cf8u5dde","u51c9u5c71","u7ef5u9633","u7709u5c71","u5185u6c5f","u5357u5145","u6500u679du82b1","u9042u5b81","u5b9cu5bbe","u96c5u5b89","u81eau8d21","u8d44u9633"]},
33         {"name":"u4e91u5357","child":["u4fddu5c71","u695au96c4","u5927u7406","u8feau5e86","u5fb7u5b8f","u7ea2u6cb3","u6606u660e","u4e3du6c5f","u4e34u6ca7","u6012u6c5f","u666eu6d31","u66f2u9756","u6587u5c71","u897fu53ccu7248u7eb3","u7389u6eaa","u662du901a"]},
34         {"name":"u65b0u7586","child":["u963fu514bu82cf","u963fu62c9u5c14","u5df4u97f3u90edu695e","u535au5c14u5854u62c9","u660cu5409","u54c8u5bc6","u548cu7530","u514bu62c9u739bu4f9d","u5e93u5c14u52d2","u5580u4ec0","u514bu5b5cu52d2u82cf","u77f3u6cb3u5b50","u5410u9c81u756a","u56feu6728u8212u514b","u4e4cu9c81u6728u9f50","u4e94u5bb6u6e20","u4f0au7281","u5854u57ce","u963fu52d2u6cf0"]},
35         {"name":"u5b81u590f","child":["u56fau539f","u77f3u5634u5c71","u5434u5fe0","u94f6u5ddd","u4e2du536b"]},
36         {"name":"u9752u6d77","child":["u679cu6d1b","u9ec4u5357","u6d77u897f","u6d77u4e1c","u6d77u5317","u6d77u5357","u897fu5b81","u7389u6811"]},
37         {"name":"u897fu85cf","child":["u963fu91cc","u660cu90fd","u62c9u8428","u6797u829d","u90a3u66f2","u65e5u5580u5219","u5c71u5357"]},
38         {"name":"u5e7fu897f","child":["u767eu8272","u5317u6d77","u5d07u5de6","u9632u57ceu6e2f","u6842u6797","u8d35u6e2f","u6cb3u6c60","u8d3au5dde","u67f3u5dde","u6765u5bbe","u5357u5b81","u94a6u5dde","u68a7u5dde","u7389u6797"]},
39         {"name":"u5e7fu4e1c","child":["u6f6eu5dde","u4e1cu839e","u4f5bu5c71","u5e7fu5dde","u60e0u5dde","u6cb3u6e90","u6c5fu95e8","u63edu9633","u8302u540d","u6885u5dde","u6e05u8fdc","u987au5fb7","u6df1u5733","u6c55u5934","u97f6u5173","u6c55u5c3e","u53f0u5c71","u9633u6c5f","u9633u6625","u4e91u6d6e","u73e0u6d77","u4e2du5c71","u6e5bu6c5f","u8087u5e86"]},
40         {"name":"u798fu5efa","child":["u798fu5dde","u9f99u5ca9","u5b81u5fb7","u5357u5e73","u8386u7530","u6cc9u5dde","u4e09u660e","u6b66u5937u5c71","u53a6u95e8","u6f33u5dde"]},
41         {"name":"u6d77u5357","child":["u6d77u53e3","u4e09u4e9a","u4e94u6307u5c71"]},
42         {"name":"u53f0u6e7e","child":["u53f0u5317u5e02","u9ad8u96c4u5e02","u57fau9686u5e02","u53f0u4e2du5e02","u53f0u5357u5e02","u65b0u7af9u5e02","u5609u4e49u5e02","u65b0u5317u5e02","u5b9cu5170u53bf","u6843u56edu53bf","u65b0u7af9u53bf","u82d7u6817u53bf","u53f0u4e2du53bf","u5f70u5316u53bf","u5357u6295u53bf","u4e91u6797u53bf","u5609u4e49u53bf","u53f0u5357u53bf","u9ad8u96c4u53bf","u5c4fu4e1cu53bf","u6f8eu6e56u53bf","u53f0u4e1cu53bf","u82b1u83b2u53bf"]},
43         {"name":"u9999u6e2f","child":["u4e2du897fu533a","u4e1cu533a","u4e5du9f99u57ceu533a","u89c2u5858u533a","u5357u533a","u6df1u6c34u57d7u533a","u9ec4u5927u4ed9u533a","u6e7eu4ed4u533a","u6cb9u5c16u65fau533a","u79bbu5c9bu533a","u8475u9752u533a","u5317u533a","u897fu8d21u533a","u6c99u7530u533a","u5c6fu95e8u533a","u5927u57d4u533a","u8343u6e7eu533a","u5143u6717u533a"]},
44         {"name":"u6fb3u95e8","child":["u82b1u5730u739bu5802u533a","u5723u5b89u591au5c3cu5802u533a","u5927u5802u533a","u671bu5fb7u5802u533a","u98ceu987au5802u533a","u6c39u4ed4","u8defu73af"]},
45         {"name":"u5176u4ed6","child":["u4e0du9650"]}
46     ];
47     //城市联动
48     var province='';
49     $.each(city,function(index,value){
50         province+='<option value="' + value.name + '" index="'+index+'"> ' + value.name + '</option>'
51     
52     });
53 $('select[name=province]').append(province).change(function () {
54     //$('select[name=city]').html('');
55     var option = '';
56     if ($(this).val() == '') {
57         option += '<option value="">请选择</option>';
58     }else{
59     var index = $(':selected', this).attr('index');
60             var data = city[index].child;
61             for (var i = 0; i < data.length; i++) {
62                 option += '<option value="' + data[i] + '">' + data[i] + '</option>';
63             }
64     }
65     $('select[name=city]').html(option);
66 })
67     
68     
69 })
70 
71 </script>
72 </head>
73 
74 <body>
75 
76 
77 <select name='province' >
78 <option value=''>--请选择--</option>
79 
80 </select>
81 <select name='city' >
82 <option value=''>--请选择--</option>
83 
84 </select>
85 </body>
86 </html>
复制代码

 

 

 

城市数组：

复制代码
 1 var city = [
 2         {"name":"北京","child":["东城区","西城区","崇文区","宣武区","朝阳区","海淀区","丰台区","石景山区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","门头沟区","密云县","延庆县"]},
 3         {"name":"天津","child":["和平区","河东区","河西区","南开区","河北区","红桥区","东丽区","西青区","北辰区","津南区","武清区","宝坻区","滨海新区","静海县","宁河县","蓟县"]},
 4         {"name":"上海","child":["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区","崇明县"]},
 5         {"name":"重庆","child":["渝中区","大渡口区","江北区","南岸区","北碚区","渝北区","巴南区","长寿区","双桥区","沙坪坝区","万盛区","万州区","涪陵区","黔江区","永川区","合川区","江津区","九龙坡区","南川区","綦江县","潼南县","荣昌县","璧山县","大足县","铜梁县","梁平县","开县","忠县","城口县","垫江县","武隆县","丰都县","奉节县","云阳县","巫溪县","巫山县","石柱土家族自治县","秀山土家族苗族自治县","酉阳土家族苗族自治县","彭水苗族土家族自治县"]},
 6         {"name":"河北","child":["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"]},
 7         {"name":"山西","child":["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"]},
 8         {"name":"辽宁","child":["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"]},
 9         {"name":"吉林","child":["长春","吉林","四平","辽源","通化","白山","松原","白城","延边朝鲜族自治州"]},
10         {"name":"黑龙江","child":["哈尔滨","齐齐哈尔","鹤岗","双鸭山","鸡西","大庆","伊春","牡丹江","佳木斯","七台河","黑河","绥化","大兴安岭"]},
11         {"name":"江苏","child":["南京","苏州","无锡","常州","镇江","南通","泰州","扬州","盐城","连云港","徐州","淮安","宿迁"]},
12         {"name":"浙江","child":["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"]},
13         {"name":"安徽","child":["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"]},
14         {"name":"福建","child":["福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德"]},
15         {"name":"江西","child":["南昌","景德镇","萍乡","九江","新余","鹰潭","赣州","吉安","宜春","抚州","上饶"]},
16         {"name":"山东","child":["济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","菏泽"]},
17         {"name":"河南","child":["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店"]},
18         {"name":"湖北","child":["武汉","黄石","十堰","荆州","宜昌","襄樊","鄂州","荆门","孝感","黄冈","咸宁","随州","恩施"]},
19         {"name":"湖南","child":["长沙","株洲","湘潭","衡阳","邵阳","岳阳","常德","张家界","益阳","郴州","永州","怀化","娄底","湘西"]},
20         {"name":"广东","child":["广州","深圳","珠海","汕头","韶关","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","河源","阳江","清远","东莞","中山","潮州","揭阳","云浮"]},
21         {"name":"海南","child":["海口","三亚"]},
22         {"name":"四川","child":["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","眉山","宜宾","广安","达州","雅安","巴中","资阳","阿坝","甘孜","凉山"]},
23         {"name":"贵州","child":["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"]},
24         {"name":"云南","child":["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","德宏","怒江","迪庆","大理","楚雄","红河","文山","西双版纳"]},
25         {"name":"陕西","child":["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"]},
26         {"name":"甘肃","child":["兰州","嘉峪关","金昌","白银","天水","武威","酒泉","张掖","庆阳","平凉","定西","陇南","临夏","甘南"]},
27         {"name":"青海","child":["西宁","海东","海北","海南","黄南","果洛","玉树","海西"]},
28         {"name":"内蒙古","child":["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","锡林郭勒盟","兴安盟","阿拉善盟"]},
29         {"name":"广西","child":["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"]},
30         {"name":"西藏","child":["拉萨","那曲","昌都","林芝","山南","日喀则","阿里"]},
31         {"name":"宁夏","child":["银川","石嘴山","吴忠","固原","中卫"]},
32         {"name":"新疆维吾尔自治区","child":["乌鲁木齐","克拉玛依","吐鲁番","哈密","和田","阿克苏","喀什","克孜勒苏","巴音郭楞","昌吉","博尔塔拉","伊犁","塔城","阿勒泰"]},
33         {"name":"香港","child":["香港岛","九龙东","九龙西","新界东","新界西"]},
34         {"name":"澳门","child":["澳门半岛","离岛"]},
35         {"name":"台湾","child":["台北","高雄","基隆","新竹","台中","嘉义","台南市"]},
36     ];
复制代码

 

posted @   宅女二二  阅读(359)  评论(0)  编辑  收藏  举报
相关博文：
·  uni城市选择器
·  Javascript日期、城市选择器（demo）
·  JavaScript 获取全国各个省市、城市数据
·  国内区号表（2022年7月整理）
·  Element UI 搜索树（tree），回显
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae