本文主要探讨了如何使用JavaScript实现四级联动的效果。通过解析area.js数据，详细阐述了联动选择菜单的构建过程，包括各个级别选项间的依赖逻辑和事件监听等关键步骤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select name="" id=""></select>
<select name="" id=""></select>
<select name="" id=""></select>
<select name="" id=""></select>
</body>
<script src="./area.js"></script>
<script>
var seles = document.querySelectorAll("select");
// 一
var sheng = "";
for (var key in place) {
sheng += `<option value="${key}">${key}</option>`
}
seles[0].innerHTML = sheng;
seles[0].onchange = function(){
er()
}
// 二
var plaCity = place["河南省"][0];
// var shi = "";
// for(var key1 in plaCity){
// shi += `<option value="${key1}">${key1}</option>`
// }
// seles[1].innerHTML = shi;
er()
function er() {
plaCity = place[seles[0].value][0];
var shi = "";
for (var key1 in plaCity) {
shi += `<option value="${key1}">${key1}</option>`
}
seles[1].innerHTML = shi;
san();
}
seles[1].onchange = function(){
san()
}
// 三
// var qu = "";
// plaCity["郑州市"].forEach(function(item){
// for(var key in item){
// qu += `<option value="${key}">${key}</option>`
// }
// })
// seles[2].innerHTML = qu;
function san() {
var qu = "";
plaCity[seles[1].value].forEach(function (item) {
for (var key in item) {
qu += `<option value="${key}">${key}</option>`
}
})
seles[2].innerHTML = qu;
si();
}
seles[2].onchange = function(){
si();
}
// 四
var jie = plaCity["郑州市"][0]["中原区"]
// console.log(jie);
// jie = jie.split("、");
// console.log(jie);
// var jie1 = "";
// jie.forEach(function (item) {
// jie1 += `<option value="${item}">${item}</option>`
// })
// seles[3].innerHTML = jie1;
// si()
function si() {
var i = seles[2].selectedIndex;
jie = plaCity[seles[1].value][i][seles[2].value];
// console.log(jie);
jie = jie.split("、");
// console.log(jie);
var jie1 = "";
jie.forEach(function (item) {
jie1 += `<option value="${item}">${item}</option>`
})
seles[3].innerHTML = jie1;
}
</script>
</html>area.js数据：
var area = {
'河南省': [{
'郑州市': [{
'中原区': '林山寨街道办事处、建设路街道办事处、棉纺路街道办事处、秦岭路街道办事处、桐柏路街道办事处、三官庙街道办事处、绿东村街道办事处、汝河路街道办事处、航海西路街道办事处、中原西路街道办事处、西流 湖街道办事处、须水街道办事处、石佛镇、沟赵乡'
},
{
'二七区': '淮河路街道办事处、解放路街道办事处、铭功路街道办事处、一马路街道办事处、蜜蜂张街道办事处、五里堡街道办事处、大学路街道办事处、建中街街道办事处、福华街街道办事处、德化街街道办事处、嵩山路街 道办事处、京广路街道办事处、长江路街道办事处、马寨镇、侯寨乡'
},
{
'管城回族区': '北下街街道办事处、西大街街道办事处、南关街道办事处、城东路街道办事处、东大街街道办事处、二里岗街道办事处、陇海路街道办事处、紫荆山南路街道办事处、航海东路街道办事处、十八里河镇、南曹乡、 圃田乡、经济开发区明湖街道办事处、经济开发区潮河街道办事处、京航街道办事处、商都路街道办事处'
},
{
'金水区': '经八路街道办事处、花园路街道办事处、人民路街道办事处、杜岭街道办事处、大石桥街道办事处、南阳路街道办事处、南阳新村街道办事处、文化路街道办事处、丰产路街道办事处、东风路街道办事处、北林路街 道办事处、未来路街道办事处、凤凰台街道办事处、龙子湖街道办事处、祭城路街道办事处、兴达路街道办事处、国基路街道办事处、杨金路街道办事处、丰庆路街道办事处、如意湖街道办事处、博学路街道办事处'
},
{
'上街区': '济源路街道办事处、中心路街道办事处、新安路街道办事处、工业路街道办事处、矿山街道办事处、峡窝镇'
},
{
'惠济区': '新城街道办事处、刘寨街道办事处、老鸦陈街道办事处、长兴路街道办事处、迎宾路街道办事处、大河路街道办事处、花园口镇、古荥镇'
},
{
'中牟县': '青年路街道办事处、东风路街道办事处、广惠街街道办事处、韩寺镇、官渡镇、狼城岗镇、万滩镇、白沙镇、郑庵镇、张庄镇、黄店镇、大孟镇、九龙镇、刘集镇、八岗镇、雁鸣湖镇、姚家镇、三官庙镇、刁家乡'
},
{
'巩义市': '新华路街道办事处、杜甫路街道办事处、永安路街道办事处、孝义街道办事处、紫荆路街道办事处、米河镇、新中镇、小关镇、竹林镇、大峪沟镇、河洛镇、站街镇、康店镇、北山口镇、西村镇、芝田镇、回郭镇、 鲁庄镇、夹津口镇、涉村镇、豫联工业园区管委会'
},
{
'荥阳市': '索河街道办事处、京城街道办事处、乔楼镇、豫龙镇、广武镇、王村镇、汜水镇、高山镇、刘河镇、崔庙镇、贾峪镇、城关乡、高村乡、金寨回族乡'
},
{
'新密市': '青屏街街道办事处、新华路街道办事处、西大街街道办事处、城关镇、米村镇、牛店镇、平陌镇、超化镇、苟堂镇、大隗镇、刘寨镇、白寨镇、岳村镇、来集镇、曲梁镇、袁庄乡、矿区街道办事处、尖山风景区管理 委员会、郑州曲梁产业集聚区管理委员会'
},
{
'新郑市': '新建路街道办事处、新华路街道办事处、新烟街道办事处、新村镇、辛店镇、观音寺镇、梨河镇、和庄镇、薛店镇、孟庄镇、郭店镇、龙湖镇、城关乡、八千乡、龙王乡、新港办事处、郑港办事处、具茨山国家级森 林公园管理委员会、中心城区新区建设管理委员会'
},
{
'登封市': '嵩阳街道办事处、少林街道办事处、中岳街道办事处、大金店镇、颖阳镇、卢店镇、告成镇、阳城区镇、大冶镇、宣化镇、徐庄镇、东华镇、白坪乡、君召乡、石道乡、唐庄乡、送表矿区'
},
{
'郑东新区': '郑东新区'
},
{
'高新区': '长椿路腊梅路、长椿路药厂街、长椿路梧桐街'
},
{
'经开区': '经开第三大街、航海东路、朝凤路、经北二路'
},
{
'航空港区': '郑港十一路、富三街'
}
],
'开封市': [{
'龙亭区': '北书店街道办事处、午朝门街道办事处、大兴街道办事处、北道门街道办事处、北郊乡、柳园口乡、城西街道、梁苑街道、杏花营镇、西郊乡、水稻乡、杏花营农场、'
},
{
'顺河回族区': '清平街道、铁塔街道、曹门街道、宋门街道、工业街道、苹果园街道、东郊乡、土柏岗乡'
},
{
'鼓楼区': '相国寺街道、新华街道、卧龙街道、州桥街道、西司门街道、南苑街道、五一街道、仙人庄街道'
},
{
'禹王台区': '三里堡街道、新门关街道、繁塔街道、官坊街道、菜市街道、南郊乡、汪屯乡'
},
{
'祥符区': '城关镇、陈留镇、仇楼镇、八里湾镇、曲兴镇、朱仙镇、半坡店乡、罗王乡、刘店乡、袁坊乡、杜良乡、兴隆乡、西姜寨乡、万隆乡、范村乡'
},
{
'杞县': '城关镇、五里河镇、付集镇、于镇镇、高阳镇、葛岗镇、阳固镇、邢口镇、裴村店乡、宗店乡、板木乡、竹林乡、官庄乡、湖岗乡、苏木乡、沙沃乡、平城乡、泥沟乡、柿元乡、西寨乡、城郊乡、工业园区'
},
{
'通许县': '城关镇、竖岗镇、玉皇庙镇、四所楼镇、朱砂镇、长智镇、冯庄乡、孙营乡、大岗李乡、邸阁乡、练城乡、厉庄乡'
},
{
'尉氏县': '城关镇、洧川镇、朱曲镇、蔡庄镇、永兴镇、张市镇、十八里镇、水坡镇、大营镇、邢庄乡、庄头乡、大马乡、岗李乡、门楼任乡、大桥乡、南曹乡、小陈乡'
},
{
'兰考县': '城关镇、固阳镇、南彰镇、张君墓镇、红庙镇、城关乡、三义寨乡、坝头乡、爪营乡、谷营乡、小宋乡、孟寨乡、许河乡、葡萄架乡、闫楼乡、仪封乡、中原石油勘探三公司、仪封园艺场、造纸林场、柳林林场、西 关农场、畜牧良种农场、固阳农科所'
}
],
'洛阳市': [{
'老城区': '西关街道办事处、西南隅街道办事处、西北隅街道办事处、东南隅街道办事处、东北隅街道办事处、南关街道办事处、洛浦街道办事处、邙山街道办事处'
},
{
'西工区': '王城路街道办事处、金谷园街道办事处、西工街道办事处、邙岭路街道办事处、道北路街道办事处、唐宫路街道办事处、汉屯路街道办事处、凯旋东路街道办事处、洛北乡、红山乡'
},
{
'瀍河回族区': '东关街道办事处、五股路街道办事处、北窑街道办事处、塔湾街道办事处、杨文街道办事处、华林新村街道办事处、瀍河回族区'
},
{
'涧西区': '湖北路街道办事处、天津路街道办事处、长春路街道办事处、南昌路街道办事处、长安路街道办事处、重庆路街道办事处、郑州路街道办事处、武汉路街道办事处、徐家营街道办事处、珠江路街道办事处、周山路街 道办事处、工农街道办事处、辛店街道办事处、瀛洲街道办事处、创业路街道办事处'
},
{
'吉利区': '大庆路街道办事处、吉利乡'
},
{
'洛龙区': '安乐街道办事处、开元路街道办事处、龙门石窟街道办事处、关林镇、龙门镇、安乐镇、白马寺镇、李楼镇、诸葛镇、李村镇、庞村镇、寇店镇、佃庄镇、古城乡、镇北路街道办事处'
},
{
'孟津县': '城关镇、会盟镇、平乐镇、送庄镇、白鹤镇、朝阳镇、小浪底镇、麻屯镇、横水镇、常袋镇'
},
{
'新安县': '城关镇、石寺镇、五头镇、磁涧镇、铁门镇、南李村镇、北冶镇、仓头镇、正村镇、石井镇、曹村乡、洛阳市洛新产业集聚区管理委员会'
},
{
'栾川县': '城关镇、赤土店镇、合峪镇、潭头镇、三川镇、冷水镇、陶湾镇、石庙镇、庙子镇、狮子庙镇、白土镇、叫河镇、栾川乡、秋扒乡'
},
{
'嵩县': '城关镇、田湖镇、旧县镇、车村镇、闫庄镇、德亭镇、大章镇、白河镇、纸房镇、大坪乡、库区乡、何村乡、饭坡乡、九店乡、黄庄乡、木植街乡、陶村林场、五马寺林场、王莽寨林场'
},
{
'汝阳县': '城关镇、上店镇、付店镇、小店镇、三屯镇、刘店镇、内埠镇、柏树乡、十八盘乡、靳村乡、王坪乡、陶营乡、蔡店乡、大安工业园区'
},
{
'宜阳县': '城关镇、丰李镇、柳泉镇、韩城镇、白杨镇、香鹿山镇、锦屏镇、三乡镇、张坞镇、莲庄镇、盐镇乡、高村乡、花果山乡、上观乡、赵保乡、董王庄乡、樊村乡'
},
{
'洛宁县': '城关镇、王范回族镇、上戈镇、下峪镇、河底镇、兴华镇、东宋镇、马店镇、故县镇、赵村镇、城郊乡、小界乡、长水乡、罗岭乡、底张乡、山底乡、陈吴乡、涧口乡'
},
{
'伊川县': '城关镇、鸣皋镇、水寨镇、彭婆镇、白沙镇、江左镇、高山镇、吕店镇、半坡镇、鸦岭乡、平等乡、酒后乡、葛寨乡、白元乡'
},
{
'偃师市': '商城街道办事处、工业区街道办事处、首阳山街道办事处、翟镇、岳滩镇、顾县镇、缑氏镇、府店镇、高龙镇、山化镇、邙岭乡、大口乡'
},
{
'伊滨区': '诸葛镇、李村镇、庞村镇、佃庄镇、寇店镇'
},
{
'洛阳新区': '牡丹大道、金城寨街、王城大道'
},
{
'高新区': '河洛路、孙辛路'
}
],
'平顶山市': [{
'新华区': '曙光街街道办事处、光明路街道办事处、中兴路街道办事处、矿工路街道办事处、西市场街道办事处、新新街街道办事处、青石山街道办事处、湛河北路街道办事处、湖滨路街道办事处、西高皇街道办事处、焦店 镇、香山管委会、滨湖管委会、应滨管委会'
},
{
'卫东区': '东安路街道办事处、优越路街道办事处、五一路街道办事处、建设路街道办事处、东环路街道办事处、东工人镇街道办事处、光华路街道办事处、鸿鹰街道办事处、皇台街道办事处、北环路街道办事处、东高皇街道办事处、蒲城街道办事处'
},
{
'石龙区': '高庄街道办事处、龙兴街道办事处、人民路街道办事处、龙河街道办事处'
},
{
'湛河区': '马庄街道、南环路街道、姚孟街道、九里山街道、轻工路街道、高阳路街道、北渡镇、曹镇乡'
},
{
'宝丰县': '铁路街道办事处、城关镇、周庄镇、闹店镇、石桥镇、商酒务镇、大营镇、张八桥镇、杨庄镇、肖旗乡、赵庄乡、前营乡、李庄乡'
},
{
'叶县': '昆阳镇、任店镇、保安镇、仙台镇、遵化店镇、叶邑镇、廉村镇、常村镇、辛店镇、城关乡、夏李乡、马庄回族乡、田庄乡、龚店乡、龙泉乡、水寨乡、洪庄杨乡、邓李乡'
},
{
'鲁山县': '露峰街道办事处、琴台街道办事处、鲁阳街道办事处、汇源街道办事处、下汤镇、梁洼镇、张官营镇、张良镇、尧山镇、赵村乡、四棵树乡、团城乡、熊背乡、让河乡、瓦屋乡、观音寺乡、昭平台库区乡、背孜乡 、仓头乡、董周乡、张店乡、辛集乡、滚子营乡、马楼乡'
},
{
'郏县': '龙山街道办事处、东城街道办事处、冢头镇、安良镇、堂街镇、薛店镇、长桥镇、茨芭镇、黄道镇、李口镇、王集乡、姚庄、回族乡、白庙乡、广阔天地乡、渣元乡'
},
{
'舞钢市': '垭口街道办事处、寺坡街道办事处、朱兰街道办事处、院岭街道办事处、矿建街道办事处、尚店镇、八台镇、尹集镇、枣林镇、庙街乡、铁山乡、武功乡、杨庄乡'
},
{
'汝州市': '煤山街道办事处、风穴路街道办事处、钟楼街道办事处、洗耳河街道办事处、汝南街道办事处、寄料镇、温泉镇、临汝镇、小屯镇、杨楼镇、蟒川镇、庙下镇、米庙镇、陵头镇、王寨乡、纸坊乡、骑岭乡、大峪乡、夏店乡、焦村乡'
}
],
'安阳市': [{
'文峰区': '东大街街道办事处、头二三街道办事处、甜水井街道办事处、东关街道办事处、南关街道办事处、西大街街道办事处、北大街街道办事处、西关街道办事处、紫薇大道街道办事处、光华路街道办事处、永明路街道办 
最低0.47元/天 解锁文章
扫一扫
6887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
