JS实现 省-市-区 三级联动
address.jsp代码
<%--
Created by IntelliJ IDEA.
User: Kent
Date: 2020-11-19
Time: 17:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>Title</title>
</head>
<body>
<div>
<fieldset>
<form action="#">
<label for="addr-show">您选择的是：
<input type="text" value="" id="addr-show">
</label>
<br/>
<!--省份选择-->
<select id="prov" onchange="showCity(this)">
<option>=请选择省份=</option>
</select>
<!--城市选择-->
<select id="city" onchange="showCountry(this)">
<option>=请选择城市=</option>
</select>
<!--县区选择-->
<select id="country" onchange="selecCountry(this)">
<option>=请选择县区=</option>
</select>
<button type="button" class="btn met1" onClick="showAddr()" id="button-show" >确定</button>
</form>
</fieldset>
</div>
<script src="${cpt}/js/city.js" language="javascript" type="text/javascript" charset="UTF-8"></script>
<script src="${cpt}/js/method.js" language="javascript" type="text/javascript" charset="UTF-8"></script>
</body>
</html>
method.js
/*根据id获取对象*/
function $(str) {
return document.getElementById(str);
}
var addrShow = $('addr-show');
var btn = document.getElementsByClassName('met1')[0];
var prov = $('prov');
var city = $('city');
var country = $('country');
/*用于保存当前所选的省市区*/
var current = {
prov: '',
city: '',
country: ''
};
/*自动加载省份列表*/
(function showProv() {
btn.disabled = true;
var len = provice.length;
for (var i = 0; i < len; i++) {
var provOpt = document.createElement('option');
provOpt.innerText = provice[i]['name'];
provOpt.value = i;
prov.appendChild(provOpt);
}
})();
/*根据所选的省份来显示城市列表*/
function showCity(obj) {
var val = obj.options[obj.selectedIndex].value;
if (val != current.prov) {
current.prov = val;
addrShow.value = '';
btn.disabled = true;
}
//console.log(val);
if (val != null) {
city.length = 1;
var cityLen = provice[val]["city"].length;
for (var j = 0; j < cityLen; j++) {
var cityOpt = document.createElement('option');
cityOpt.innerText = provice[val]["city"][j].name;
cityOpt.value = j;
city.appendChild(cityOpt);
}
}
}
/*根据所选的城市来显示县区列表*/
function showCountry(obj) {
var val = obj.options[obj.selectedIndex].value;
current.city = val;
if (val != null) {
country.length = 1; //清空之前的内容只留第一个默认选项
var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
if (countryLen == 0) {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
return;
}
for (var n = 0; n < countryLen; n++) {
var countryOpt = document.createElement('option');
countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
countryOpt.value = n;
country.appendChild(countryOpt);
}
}
}
/*选择县区之后的处理函数*/
function selecCountry(obj) {
current.country = obj.options[obj.selectedIndex].value;
if ((current.city != null) && (current.country != null)) {
btn.disabled = false;
}
}
/*点击确定按钮显示用户所选的地址*/
function showAddr() {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name + '-' + provice[current.prov]["city"][current.city].districtAndCounty[current.country];
}
—————————————分割线————————————————————
city.js
// 地址文件
var provice = [
{
name: "北京市",
city: [
{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
}
]
},
{
name: "天津市",
city: [
{
name: "天津市",
districtAndCounty: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"]
}
]
},
{
name: "上海市",
city: [
{
name: "上海市",
districtAndCounty: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区?", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县", "城桥镇"]
}
]
},
{
name: "重庆市",
city: [
{
name: "重庆市",
districtAndCounty: ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]
}
]
},
{
name: "河北省",
city: [
{
name: "石家庄市",
districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
},
{
name: "张家口市",
districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
},
{
name: "承德市",
districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
},
{
name: "秦皇岛市",
districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
},
{
name: "唐山市",
districtAndCounty: ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦县", "滦州镇", "滦南县", "倴城镇", "乐亭县", "乐亭镇", "迁西县", "兴城镇", "玉田县", "玉田镇", "唐海县", "唐海镇"]
},
{
name: "廊坊市",
districtAndCounty: ["安次区", "广阳区", "霸州市", "三河市", "固安县", "固安镇", "永清县", "永清镇", "香河县", "淑阳镇", "大城县", "平舒镇", "文安县", "文安镇", "大厂回族自治县", "大厂镇"]
},
{
name: "保定市",
districtAndCounty: ["新市区", "北市区", "南市区", "定州市", "涿州市", "安国市", "高碑店市", "满城县", "满城镇", "清苑县", "清苑镇", "易县", "易州镇", "徐水县", "安肃镇", "涞源县", "涞源镇", "定兴县", "定兴镇", "顺平县", "蒲阳镇", "唐县", "仁厚镇", "望都县", "望都镇", "涞水县", "涞水镇", "高阳县", "高阳镇", "安新县", "安新镇", "雄县", "雄州镇", "容城县", "容城镇", "曲阳县", "恒州镇", "阜平县", "阜平镇", "博野县", "博陵镇", "蠡县", "蠡吾镇"]
},
{
name: "衡水市",
districtAndCounty: ["桃城区", "冀州市", "深州市", "枣强县", "枣强镇", "武邑县", "武邑镇", "武强县", "武强镇", "饶阳县", "饶阳镇", "安平县", "安平镇", "故城县", "郑口镇", "景县", "景州镇", "阜城县", "阜城镇"]
},
{
name: "沧州市",
districtAndCounty: ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "清州镇", "东光县", "东光镇", "海兴县", "苏基镇", "盐山县", "盐山镇", "肃宁县", "肃宁镇", "南皮县", "南皮镇", "吴桥县", "桑园镇", "献县", "乐寿镇", "孟村回族自治县", "孟村镇"]
},
{
name: "邢台市",
districtAndCounty: ["桥东区", "桥西区", "南宫市", "沙河市", "邢台县", "邢台市桥东区", "临城县", "临城镇", "内丘县", "内丘镇", "柏乡县", "柏乡镇", "隆尧县", "隆尧镇", "任县", "任城镇", "南和县", "和阳镇", "宁晋县", "凤凰镇", "巨鹿县", "巨鹿镇", "新河县", "新河镇", "广宗县", "广宗镇", "平乡县", "丰州镇", "威县", "洺州镇", "清河县", "葛仙庄镇", "临西县", "临西镇"]
},
{
name: "邯郸市",
districtAndCounty: ["丛台区", "邯山区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "南堡乡东小屯村", "临漳县", "临漳镇", "成安县", "成安镇", "大名县", "大名镇", "涉县", "涉城镇", "磁县", "磁州镇", "肥乡县", "肥乡镇", "永年县", "临洺关镇", "邱县", "新马头镇", "鸡泽县", "鸡泽镇", "广平县", "广平镇", "馆陶县", "馆陶镇", "魏县", "魏城镇", "曲周县", "曲周镇"]
}
]
},
{
name: "山西省",
city: [
{
name: "太原市",
districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县", "清源镇", "阳曲县", "黄寨镇", "娄烦县", "娄烦镇"]
},
{
name: "朔州市",
districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
},
{
name: "大同市",
districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县", "壶泉镇", "灵丘县", "武灵镇", "浑源县", "永安镇", "左云县", "云兴镇", "大同县", "西坪镇"]
},
{
name: "阳泉市",
districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
},
{
name: "长治市",
districtAndCounty: ["城区", "郊区", "潞城市", "长治县", "韩店镇", "襄垣县", "古韩镇", "屯留县", "麟绛镇", "平顺县", "青羊镇", "黎城县", "黎侯镇", "壶关县", "龙泉镇", "长子县", "丹朱镇", "武乡县", "丰州镇", "沁县", "定昌镇", "沁源县", "沁河镇"]
},
{
name: "晋城市",
districtAndCounty: ["城区", "高平市", "泽州县", "南村镇", "沁水县", "龙港镇", "阳城县", "凤城镇", "陵川县", "崇文镇"]
},
{
name: "忻州市",
districtAndCounty: ["忻府区", "原平市", "定襄县", "晋昌镇", "五台县", "台城镇", "代县", "上馆镇", "繁峙县", "繁城镇", "宁武县", "凤凰镇", "静乐县", "鹅城镇", "神池县", "龙泉镇", "五寨县", "砚城镇", "岢岚县", "岚漪镇", "河曲县", "文笔镇", "保德县", "东关镇", "偏关县", "新关镇"]
},
{
name: "晋中市",
districtAndCounty: ["榆次区", "介休市", "榆社县", "箕城镇", "左权县", "辽阳镇", "和顺县", "义兴镇", "昔阳县", "乐平镇", "寿阳县", "朝阳镇", "太谷县", "明星镇", "祁县", "昭余镇", "平遥县", "古陶镇", "灵石县", "翠峰镇"]
},
{
name: "临汾市",
districtAndCounty: ["尧都区", "侯马市", "霍州市", "曲沃县", "乐昌镇", "翼城县", "唐兴镇", "襄汾县", "新城镇", "洪洞县", "大槐树镇", "古县", "岳阳镇", "安泽县", "府城镇", "浮山县", "天坛镇", "吉县", "吉昌镇", "乡宁县", "昌宁镇", "蒲县", "蒲城镇", "大宁县", "昕水镇", "永和县", "芝河镇", "隰县", "龙泉镇", "汾西县", "永安镇"]
},
{
name: "吕梁市",
districtAndCounty: ["离石区", "孝义市", "汾阳市", "文水县", "凤城镇", "中阳县", "宁乡镇", "兴县", "蔚汾镇", "临县", "临泉镇", "方山县", "圪洞镇", "柳林县", "柳林镇", "岚县", "东村镇", "交口县", "水头镇", "交城县", "天宁镇", "石楼县", "灵泉镇"]
},
{
name: "运城市",
districtAndCounty: ["盐湖区", "永济市", "河津市", "芮城县", "古魏镇", "临猗县", "猗氏镇", "万荣县", "解店镇", "新绛县", "龙兴镇", "稷山县", "稷峰镇", "闻喜县", "桐城镇", "夏县", "瑶峰镇", "绛县", "古绛镇", "平陆县", "圣人涧镇", "垣曲县", "新城镇"]
}
]
},
{
name: "内蒙古",
city: [
{
name: "呼和浩特市",
districtAndCounty: ["回民区", "新城区", "玉泉区", "赛罕区", "托克托县", "双河镇", "武川县", "可可以力更镇", "和林格尔县", "城关镇", "清水河县", "城关镇", "土默特左旗", "察素齐镇"]
},
{
name: "包头市",
districtAndCounty: ["昆都仑区", "东河区", "青山区", "石拐区", "白云矿区", "九原区", "固阳县", "金山镇", "土默特右旗", "萨拉齐镇", "达尔罕茂明安联合旗", "百灵庙镇"]
},
{
name: "乌海市",
districtAndCounty: ["海勃湾区", "海南区", "乌达区"]
},
{
name: "赤峰市",
districtAndCounty: ["红山区", "元宝山区", "松山区", "宁城县", "天义镇", "林西县", "林西镇", "阿鲁科尔沁旗", "天山镇", "巴林左旗", "林东镇", "巴林右旗", "大板镇", "克什克腾旗", "经棚镇", "翁牛特旗", "乌丹镇", "喀喇沁旗", "锦山镇", "敖汉旗", "新惠镇"]
},
{
name: "通辽市",
districtAndCounty: ["科尔沁区", "霍林郭勒市", "开鲁县", "开鲁镇", "库伦旗", "库伦镇", "奈曼旗", "大沁他拉镇", "扎鲁特旗", "鲁北镇", "科尔沁左翼中旗", "保康镇", "科尔沁左翼后旗", "甘旗卡镇"]
},
{
name: "呼伦贝尔市",
districtAndCounty: ["海拉尔区", "满洲里市", "扎兰屯市", "牙克石市", "根河市", "额尔古纳市", "阿荣旗", "那吉镇", "新巴尔虎右旗", "阿拉坦额莫勒镇", "新巴尔虎左旗", "阿穆古郎镇", "陈巴尔虎旗", "巴彦库仁镇", "鄂伦春自治旗", "阿里河镇", "鄂温克族自治旗", "巴彦托海镇", "莫力达瓦达斡尔族自治旗", "尼尔基镇"]
},
{
name: "鄂尔多斯市",
districtAndCounty: ["东胜区", "达拉特旗", "树林召镇", "准格尔旗", "薛家湾镇", "鄂托克前旗", "敖勒召其镇", "鄂托克旗", "乌兰镇", "杭锦旗", "锡尼镇", "乌审旗", "嘎鲁图镇", "伊金霍洛旗", "阿勒腾席热镇"]
},
{
name: "乌兰察布市",
districtAndCounty: ["集宁区", "丰镇市", "卓资县", "卓资山镇", "化德县", "长顺镇", "商都县", "商都镇", "兴和县", "城关镇", "凉城县", "岱海镇", "察哈尔右翼前旗", "土贵乌拉镇", "察哈尔右翼中旗", "科布尔镇", "察哈尔右翼后旗", "白音察干镇", "四子王旗", "乌兰花镇"]
},
{
name: "巴彦淖尔市",
districtAndCounty: ["临河区", "五原县", "隆兴昌镇", "磴口县", "巴彦高勒镇", "乌拉特前旗", "乌拉山镇", "乌拉特中旗", "海流图镇", "乌拉特后旗", "巴音宝力格镇", "杭锦后旗", "陕坝镇"]
},
{
name: "兴安盟",
districtAndCounty: ["乌兰浩特市", "阿尔山市", "突泉县", "突泉镇", "科尔沁右翼前旗", "大坝沟镇", "科尔沁右翼中旗", "巴彦呼硕镇", "扎赉特旗", "音德尔镇"]
},
{
name: "锡林郭勒盟",
districtAndCounty: ["锡林浩特市", "二连浩特市", "多伦县", "多伦淖尔镇", "阿巴嘎旗", "别力古台镇", "苏尼特左旗", "满都拉图镇", "苏尼特右旗", "赛汉塔拉镇", "东乌珠穆沁旗", "乌里雅斯太镇", "西乌珠穆沁旗", "巴拉嘎尔郭勒镇", "太仆寺旗", "宝昌镇", "镶黄旗", "新宝拉格镇", "正镶白旗", "明安图镇", "正蓝旗", "上都镇"]
},
{
name: "阿拉善盟",
districtAndCounty: ["巴彦浩特镇", "阿拉善右旗", "额肯呼都格镇", "额济纳旗", "达来呼布镇"]
}
]
},
{
name: "辽宁省",
city: [
{
name: "沈阳市",
districtAndCounty: ["沈河区", "和平区", "大东区", "皇姑区", "铁西区"
最低0.47元/天 解锁文章
2421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
