运用极简行代码实现省市区三级联动【固定数据版】

本文主要是介绍运用极简行代码实现省市区三级联动【固定数据版】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

运用极简行代码实现省市区三级联动【固定数据版】

页面展示效果
在这里插入图片描述
map.html

<style>body{background: #eee;}select{width: 90px;}
</style><body><div><select id="province"><option style="display: none;" selected>请选择省份</option></select><select id="city"><option style="display: none;" selected>请选择城市</option></select><select id="area"><option style="display: none;" selected>请选择地区</option></select></div>
</body>

map.js

$(function(){$("#province").change(function() {clearCity();clearArea();$.each(arrData, function(a, b) { //遍历键值if ($("#province option:selected").text() == a) { //筛选市$.each(b, function(c, d) {$("#city").append($("<option></option>").html(c))})$("#city").change(function() {clearArea();$.each(b, function(e, f) {if ($("#city option:selected").text() == e) { //筛选区$.each(f.split(","), function() {$("#area").append($("<option></option>").html(this))})}})})}})})initPor();
})// 初始化省
function initPor() {$.each(arrData, function(item) {// 2种写法// $("#province").append("<option>"+ item +"</option>")// $("#province").append($("<option></option>").val(item).html(item))$("#province").append($("<option></option>").html(item))})
}// 清空城市
function clearCity() {// 2种写法// $("#city").html("<option>请选择</option>")$("#city").prop("length",1)}// 清空地区
function clearArea() {// 2种写法// $("#area").html("<option>请选择</option>")$("#area").prop("length",1)
}

省市区数据（加到map.js头部）

// 省市区数据
var  arrData = {广东:{广州:"白云,从化,番禺,海珠,花都,黄埔,荔湾,天河,越秀,增城,南沙",深圳:"罗湖,福田,南山,盐田,宝安,龙岗,光明,坪山,龙华,大鹏,深汕",韶关:"曲江,始兴,南雄,仁化,乐昌,翁源,乳源,新丰,韶关城区",珠海:"珠海斗门,珠海香洲,珠海金湾",汕头:"澄海,南澳,潮阳,潮南,汕头龙湖,汕头金平,汕头濠江",佛山:"高明,三水,顺德,南海,禅城",江门:"恩平,台山,鹤山,开平,新会,蓬江,江海",湛江:"吴川,遂溪,雷州,徐闻,廉江,赤坎,霞山,坡头局,麻章局,东海局",茂名:"信宜,电白,化州,高州,茂南,茂港",肇庆:"广宁,怀集,封开,徳庆,高要,四会,端州,鼎湖,大旺",惠州:"惠阳,博罗,惠东,龙门,大亚湾,惠城,仲恺",梅州:"梅县,大埔,丰顺,五华,兴宁,平远,蕉岭,梅州城区",汕尾:"海丰,陆丰,陆河,红海湾,汕尾城区",河源:"龙川,连平,和平,东源,紫金,源城",阳江:"阳春,阳东,海陵岛,阳西,阳江城区",清远:"佛冈,清新,英德,连州,连山,连南,阳山,清远清城",潮州:"潮安,饶平,湘桥",揭阳:"揭东,普宁,惠来,揭西,榕城",云浮:"新兴,罗定,郁南,云安,云城",中山:"板芙供电分局,大涌供电分局,东凤供电分局,东区供电分局,东升供电分局,阜沙供电分局,港口供电分局,古镇供电分局,横栏供电分局,黄圃供电分局,火炬供电分局,民众供电分局,南朗供电分局,南区供电分局,南头供电分局,三角供电分局,三乡供电分局,沙溪供电分局,神湾供电分局,石岐供电分局,坦洲供电分局,五桂山供电分局,西区供电分局,小榄供电分局",东莞:"东莞城区供电分局,长安供电分局,虎门供电分局,塘厦供电分局,厚街供电分局,常平供电分局,清溪供电分局,大朗供电分局,寮步供电分局,凤岗供电分局,大岭山供电分局,黄江供电分局,石碣供电分局,中堂供电分局,桥头供电分局,高埗供电分局,茶山供电分局,麻涌供电分局,横沥供电分局,道滘供电分局,石排供电分局,沙田供电分局,樟木头供电分局,东坑供电分局,企石供电分局,石龙供电分局,谢岗供电分局,洪梅供电分局,望牛墩供电分局,松山湖供电分局"},广西:{南宁:"南宁邕宁供电有限公司,南宁武鸣供电有限公司,南宁横县,南宁宾阳,南宁上林,马山供电有限公司,南宁隆安,青秀供电分局,兴宁供电分局,城西供电分局,五象供电分局,江南供电分局",柳州:"柳江供电公司,柳州柳城,柳州融安,柳州鹿寨,城南供电分局,城北供电分局,柳东供电分局",桂林:"城南供电分局,桂林临桂,桂林阳朔,桂林永福,桂林灵川,桂林兴安,城中供电分局,东城供电分局",梧州:"万秀供电分局,长洲供电分局",北海:"合浦供电公司,城区供电分局,铁山港供电分局",防城港:"防城港防城,防城港东兴,客户服务中心",钦州:"钦州灵山,钦州浦北,钦州新区,城区供电分局,滨海供电分局",贵港:"贵港桂平,贵港平南,港北供电分局,港南供电分局,覃塘供电分局",玉林:"玉林北流,玉林陆川,城区供电分局",百色:"百色,百色田阳,田东供电公司,百色平果,隆林供电有限公司",河池:"河池金城江,河池宜州,河池环江,河池东兰,河池大化,罗城供电公司,城区供电分局",来宾:"来宾,来宾兴宾,来宾武宣,象州供电公司,来宾忻城,来宾合山",崇左:"崇左,崇左扶绥,崇左凭祥",贺州:"贺州"},云南:{昆明:"昆明五华,昆明官渡,昆明盘龙,昆明东川,昆明呈贡,昆明西山,昆明晋宁,昆明安宁,昆明富民,昆明宜良,昆明嵩明,昆明禄劝,昆明石林,昆明寻甸",曲靖:"曲靖麒麟,曲靖沾益,曲靖富源,曲靖罗平,曲靖师宗,曲靖陆良,曲靖会泽,曲靖宣威,曲靖马龙",玉溪:"玉溪红塔供电分局,玉溪江川,玉溪澄江,玉溪通海,玉溪易门,玉溪峨山,玉溪新平,玉溪华宁,玉溪元江",昭通:"昭通昭阳分局,昭通鲁甸,昭通巧家,昭通盐津,昭通大关,昭通永善,昭通绥江,昭通镇雄,昭通彝良,昭通威信,昭通水富",普洱:"普洱思茅,普洱宁洱,普洱墨江,普洱景东,普洱镇沅,普洱江城,普洱孟连,普洱澜沧,普洱西盟,普洱景谷",临沧:"临沧凤庆,临沧云县,临沧双江,临沧耿马,临沧临翔,临沧永德,临沧镇康,临沧沧源",楚雄:"楚雄双柏,楚雄牟定,楚雄南华,楚雄姚安,楚雄永仁,楚雄元谋,楚雄禄丰,楚雄鹿城,楚雄武定,楚雄大姚",红河:"红河蒙自分局,红河金平分局,红河开远,红河弥勒,红河个旧,红河建水,红河石屏,红河元阳,河口瑶族自治县供电有限责任公司,红河屏边,红河泸西,红河州红河县,红河绿春",西双版纳:"西双版纳勐海,西双版纳勐腊,西双版纳景洪",大理:"大理弥渡,大理城区,大理巍山,大理漾濞,大理祥云,大理宾川,大理云龙,大理南涧,大理洱源,大理剑川,大理永平,大理鹤庆",怒江:"怒江泸水,怒江兰坪,怒江福贡,怒江贡山",迪庆:"迪庆开发区分局,迪庆维西分局,迪庆德钦分局,迪庆香格里拉分局",德宏:"德宏芒市,德宏陇川,德宏盈江,德宏梁河",瑞丽:"瑞丽",丽江:"丽江古城,丽江玉龙,丽江永胜,丽江华坪,丽江宁蒗",文山电力股份有限公司:"文山分公司,砚山分公司,富宁分公司,丘北分公司,西畴分公司,文山平远供电有限责任公司",文山:"文山马关,文山麻栗坡"},	 贵州:{贵阳:"贵阳花溪,贵阳清镇,贵阳息烽,贵阳金阳,贵阳小河,贵阳乌当,贵阳白云,贵阳开阳,贵阳修文,城南分局,城北分局,双龙分局",遵义:"桐梓,遵义市郊,绥阳,湄潭,播州,正安,仁怀,习水,凤冈,务川,道真,赤水,余庆,遵义城区分局",六盘水:"钟山,水城,盘县,六枝,六盘水城区分局",安顺:"安顺市郊,普定,平坝,镇宁,关岭,紫云,安顺经济技术开发区分局,黄果树分局,安顺城区分局",凯里:"凯里市郊,雷山,施秉,镇远,岑巩,锦屏,台江,剑河,天柱,黎平,榕江,从江,黄平,三穗,丹寨,麻江,凯里城区分局",都匀:"都匀市郊,贵定,独山,平塘,瓮安,荔波,福泉,三都,都匀经济开发区,惠水,龙里,长顺,罗甸,都匀城区分局",兴义:"安龙,贞丰,兴仁,晴隆,册亨,望谟,普安,兴义城区分局",毕节:"大方,毕节市郊,黔西,金沙,赫章,威宁,织金,纳雍,毕节城区分局",铜仁:"碧江,松桃,印江,思南,沿河,石阡,万山,江口,玉屏,德江,铜仁城区分局",贵安:"贵安"},海南:{海口市:"海口",儋州市:"儋州",三亚市:"三亚",琼海市:"琼海",文昌市:"文昌",澄迈县:"澄迈",万宁市:"万宁",乐东黎族自治县:"乐东",东方市:"东方",陵水黎族自治县:"陵水",临高县:"临高",昌江黎族自治县:"昌江",屯昌县:"屯昌",定安县:"定安",琼中黎族苗族自治县:"琼中",白沙黎族自治县:"白沙",保亭黎族苗族自治县:"保亭",五指山市:"五指山"}
};