原生JavaScript写三级联动城市简单思路

最新推荐文章于 2023-11-25 20:58:06 发布

方佳宇

最新推荐文章于 2023-11-25 20:58:06 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/github_36885144/article/details/53487911

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js三级联动城市简单思路

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="sheng" id=""></select>
<select name="shi" id=""></select>
<select name="xian" id=""></select>
<script type="text/javascript">
var citys=document.getElementsByTagName('select');
//sheng
varshi=[];
shi['北京']=['北京市'];
shi['天津']=['天津市'];
shi['河北']=['张家口市','石家庄市','衡水市','沧州市'];
shi['甘肃']=['兰州市','天水市'];
var xian=[];
xian['北京市']=["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","延庆镇"];
xian['天津市']=["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","蓟县","宁河县","芦台镇","静海县","静海镇"];
xian['张家口市']=["桥西区","桥东区","宣化区","下花园区","宣化县","张家口市宣化区","张北县","张北镇","康保县","康保镇","沽源县","平定堡镇","尚义县","南壕堑镇","蔚县","蔚州镇","阳原县","西城镇","怀安县","柴沟堡镇","万全县","孔家庄镇","怀来县","沙城镇","涿鹿县","涿鹿镇","赤城县","赤城镇","崇礼县","西湾子镇"];
xian['石家庄市']=["长安区","桥东区","桥西区","新华区","裕华区","井陉矿区","辛集市","藁城市","晋州市","新乐市","鹿泉市","井陉县","微水镇","正定县","正定镇","栾城县","栾城镇","行唐县","龙州镇","灵寿县","灵寿镇","高邑县","高邑镇","深泽县","深泽镇","赞皇县","赞皇镇","无极县","无极镇","平山县","平山镇","元氏县","槐阳镇","赵县","赵州镇"];
xian['衡水市']=["桃城区","冀州市","深州市","枣强县","枣强镇","武邑县","武邑镇","武强县","武强镇","饶阳县","饶阳镇","安平县","安平镇","故城县","郑口镇","景县","景州镇","阜城县","阜城镇"];
xian['沧州市']=["运河区","新华区","泊头市","任丘市","黄骅市","河间市","沧县","沧州市新华区","青县","清州镇","东光县","东光镇","海兴县","苏基镇","盐山县","盐山镇","肃宁县","肃宁镇","南皮县","南皮镇","吴桥县","桑园镇","献县","乐寿镇","孟村回族自治县","孟村镇"];
xian['兰州市']=["城关区","七里河区","西固区","安宁区","红古区","永登县","城关镇","皋兰县","石洞镇","榆中县","城关镇"];
xian['天水市']=["秦州区","麦积区","清水县","永清镇","秦安县","兴国镇","甘谷县","大像山镇","武山县","城关镇","张家川回族自治县","张家川镇"];
//遍历shi
var str ='<option value="">请选择省份</option>';
for(var i in shi){
str+='<option value="'+i+'">'+i+'</option>';
};
citys[0].innerHTML= str;
citys[0].οnchange=function(){//第一个下拉框绑定onchange事件
var nshi=this.value;//获取选择的值,shi[值]
var str ='<option value="">请选择地级市</option>';
for(var i=0; i< shi[nshi].length; i++){
var ns=shi[nshi][i];
str+='<option value="'+ns+'">'+ns+'</option>';
};
citys[1].innerHTML= str;
}
citys[1].οnchange=function(){//第二个下拉框绑定事件
var ns=this.value;
var str ='<option value="">请选择地级县区</option>';
for(var i=0; i< xian[ns].length; i++){
var nss=xian[ns][i];
str+='<option value="'+nss+'">'+nss+'</option>';
};
citys[2].innerHTML= str;
}
</script>
</body>
</html>