纯js写省市区三级联动效果

最新推荐文章于 2021-04-08 11:25:06 发布

weixin_33913332

最新推荐文章于 2021-04-08 11:25:06 发布

阅读量209

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3549294/blog/1836115

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

、

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

	</style>
</head>

<body>
	省：<select name="" id="pre" style="width: 100px;" onchange="chg(this);">
		<option value="-1">请选择</option>
	</select> 市：
	<select name="" id="city" style="width: 100px;" onchange="chg2(this);">
	</select> 区：
	<select name="" id="area" style="width: 100px;">
		
	</select>


	<script>
		var pres = ["北京 ", "上海 ", "山东 "];
		var cities = [
			["东城 ", "海淀 ", "朝阳 "],
			["浦东 ", "徐汇 ", "嘉定 "],
			["青岛 ", "菏泽 ", "烟台 "]
		];
		var area = [
			[
				["东城一 ", "东城二 ", "东城三 "],
				["海淀一 ", "海淀二 ", "海淀三 "],
				["朝阳一 ", "朝阳二 ", "朝阳三 "],
			],
			[
				["浦东一 ", "浦东二 ", "浦东三 "],
				["徐汇一 ", "徐汇二 ", "徐汇三 "],
				["嘉定一 ", "嘉定二 ", "嘉定三 "],
			],
			[
				["青岛一 ", "青岛二 ", "青岛三"],
				["菏泽一 ", "菏泽二", "菏泽三"],
				["烟台一 ", "烟台二", "烟台三"],
			],
		];
        
		var preEle = document.getElementById("pre");
		var cityEle = document.getElementById("city");
		var areaEle = document.getElementById("area");
        /*省份遍历*/
		for (var i = 0; i < pres.length; i++) {
            /*给option添加值，value值，其中pres[i]为值，i为value值*/
			var op = new Option(pres[i], i);
			preEle.options.add(op);
		};
        
        /*点击省份*/
		var val01;
		function chg(obj) {

			val01 = obj.value;

			var citiesval = cities[val01];
			var areaval = area[val01][0];
            /*清空市区*/
			cityEle.options.length = 0;
			areaEle.options.length = 0;
            /*遍历市*/
			for (i = 0; i < citiesval.length; i++) {
				var op = new Option(citiesval[i], i);
				cityEle.options.add(op);
			}

            /*遍历区*/
			for (i = 0; i < areaval.length; i++) {
				var op = new Option(areaval[i], i);
				areaEle.options.add(op);
			}

		};

        /*点击市*/
		function chg2(obj) {
			var val = obj.value;
			var areav = area[val01][val];
			areaEle.options.length = 0;
            /*遍历区*/
			for (i = 0; i < areav.length; i++) {
				var op = new Option(areav[i], i);
				areaEle.options.add(op);
			}

		}

	</script>
</body>

</html>

转载于:https://my.oschina.net/u/3549294/blog/1836115