温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript中怎么实现省市区三级联动

发布时间:2021-07-02 14:04:49 阅读:187 作者:Leah 栏目:云计算
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

javascript中怎么实现省市区三级联动,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

这里先准备三个select元素,如下所示:

<div class="select_wrap"> <span>省:</span> <select id="province"> <option value="">请选择</option> </select> <span>市:</span> <select id="city"> <option value="">请选择</option> </select> <span>区/县:</span> <select id="county"> <option value="">请选择</option> </select></div>

再准备一些城市相关数据,本实例只列举了少量数量。如下所示:

var data = { "北京市": { "市辖区": ["东城区""西城区""朝阳区""丰台区""石景山区""海淀区""门头沟区""房山区""通州区""顺义区""昌平区""大兴区""怀柔区""平谷区""密云区""延庆区"] }, "河北省": { "石家庄市": ["长安区""桥西区""新华区""井陉矿区""裕华区""藁城区""鹿泉区""栾城区""井陉县""正定县""行唐县""灵寿县""高邑县""深泽县""赞皇县""无极县""平山县""元氏县""赵县""石家庄高新技术产业开发区""石家庄循环化工园区""辛集市""晋州市""新乐市"], "唐山市": ["路南区""路北区""古冶区""开平区""丰南区""丰润区""曹妃甸区""滦县""滦南县""乐亭县""迁西县""玉田县""唐山市芦台经济技术开发区""唐山市汉沽管理区""唐山高新技术产业开发区""河北唐山海港经济开发区""遵化市""迁安市"], "秦皇岛市": ["海港区""山海关区""北戴河区""抚宁区""青龙满族自治县""昌黎县""卢龙县""秦皇岛市经济技术开发区""北戴河新区"], "邯郸市": ["邯山区""丛台区""复兴区""峰峰矿区""肥乡区""永年区""临漳县""成安县""大名县""涉县""磁县""邱县""鸡泽县""广平县""馆陶县""魏县""曲周县""邯郸经济技术开发区""邯郸冀南新区""武安市"], "衡水市": ["桃城区""冀州区""枣强县""武邑县""武强县""饶阳县""安平县""故城县""景县""阜城县""河北衡水经济开发区""衡水滨湖新区""深州市"] }, "湖南省": { "长沙市": ["芙蓉区""天心区""岳麓区""开福区""雨花区""望城区""长沙县""浏阳市""宁乡市"], "株洲市": ["荷塘区""芦淞区""石峰区""天元区""株洲县""攸县""茶陵县""炎陵县""云龙示范区""醴陵市"], "湘潭市": ["雨湖区""岳塘区""湘潭县""湖南湘潭高新技术产业园区""湘潭昭山示范区""湘潭九华示范区""湘乡市""韶山市"], "衡阳市": ["珠晖区""雁峰区""石鼓区""蒸湘区""南岳区""衡阳县""衡南县""衡山县""衡东县""祁东县""衡阳综合保税区""湖南衡阳高新技术产业园区""湖南衡阳松木经济开发区""耒阳市""常宁市"], }, "广东省": { "广州市": ["荔湾区""越秀区""海珠区""天河区""白云区""黄埔区""番禺区""花都区""南沙区""从化区""增城区"], "韶关市": ["武江区""浈江区""曲江区""始兴县""仁化县""翁源县""乳源瑶族自治县""新丰县""乐昌市""南雄市"], "深圳市": ["罗湖区""福田区""南山区""宝安区""龙岗区""盐田区""龙华区""坪山区"], "珠海市": ["香洲区""斗门区""金湾区"], }};

PS:实际工作的数据一般由数据库提供。如有需要也可以到网上搜索,很多大神都搜集有完整的城市数据。

准备好这些,我们按照惯例来分析功能,再一步一步完成。

1 分别获取省市县三个下拉框,如下所示:

var eProvince = document.getElementById('province');var .........

看完上述内容,你们掌握javascript中怎么实现省市区三级联动的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://my.oschina.net/mikeowen/blog/4907313

AI

开发者交流群×