三级列表

最新推荐文章于 2022-07-08 21:10:54 发布

一位不透露姓名的先生

最新推荐文章于 2022-07-08 21:10:54 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/qq_48967079/article/details/108712442

版权

三级列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="sheng" onchange="selectsheng()">
			<option value="">请选择省份</option>
			<option value="">陕西</option>
			<option value="">吉林</option>
		</select>
		<select name="" id="shi" onchange="selectshi()">
			<option value="">请选择城市</option>
		</select>
		<select name="" id="qu">
			<option value="">请选择区县</option>
		</select>
	</body>
</html>
<script type="text/javascript">
	var sheng1 = document.getElementById("sheng");
	var shi1 = document.getElementById("shi");
	var qu1 = document.getElementById("qu");
	var arr = [
		[],
		['西安', '宝鸡', '咸阳', '商洛', '渭南', '延安'],
		['长春', '吉林', '四平', '通化', '梅河口']
	]

	function selectsheng() {
		//alert(sheng1.selectedIndex);
		shi1.length = 1;
		var index = sheng1.selectedIndex;
		var shi1Arr = arr[index];
		for (var i = 0; i < shi1Arr.length; i++) {
			var option = document.createElement("option");
			var name = document.createTextNode(shi1Arr[i]);
			option.appendChild(name);
			shi1.appendChild(option);
		}

	}

	var arr1 = [
		[],
		['雁塔', '高新', '火车站']
	]
	var arr2 = [
		[],
		['南关', '二道', '朝阳', '重庆路', '桂林路']
	]

	function selectshi() {
		var sindex = sheng1.selectedIndex;
		qu1.length = 1;
		if (sindex == 1) {
			var index = shi1.selectedIndex;
			var qu1Arr = arr1[index];
			for (var i = 0; i < qu1Arr.length; i++) {
				var op = document.createElement("option");
				var name = document.createTextNode(qu1Arr[i]);
				op.appendChild(name);
				qu1.appendChild(op);
			}
		} else {
			var index = shi1.selectedIndex;
			var qu1Arr = arr2[index];
			for (var i = 0; i < qu1Arr.length; i++) {
				var op = document.createElement("option");
				var name = document.createTextNode(qu1Arr[i]);
				op.appendChild(name);
				qu1.appendChild(op);
			}

		}

	}
</script>