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