实现select的三级联动

最新推荐文章于 2023-04-10 16:04:51 发布

Gadxiong

最新推荐文章于 2023-04-10 16:04:51 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/Gadxiong/article/details/80528661

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三级联动</title>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	</head>
	<body οnlοad="qidong(),erji(),sanji()">
		<select id="shen" οnchange="erji()"></select>
		<select id="shi" οnchange="sanji()"></select>
		<select id="xian"></select>
	</body>
	<script>
		var emps =new Array();
		emps['湖北']=['武汉','荆州'];
		emps['湖北']['武汉']=['武昌','洪山'];
		emps['湖北']['荆州']=['监利','公安'];
		emps['湖南']=['长沙','岳阳'];
		emps['湖南']['长沙']=['长沙一号','长沙二号'];
		emps['湖南']['岳阳']=['岳阳一号','岳阳二号'];
		function qidong(){
			var $shen = $("#shen");
			for (var index in emps) {
				var op = document.createElement("option");
				op.text=index;
				op.value=index;
				shen.options.add(op);
			}
		}
		function erji () {
			var $shi = $("#shi");
			$shi.empty();
			var curr = $("#shen").val();
			 for (var i = 0; i <emps[curr].length; i++) {
			 	var op = document.createElement("option");
				op.text=emps[curr][i];
				op.value=emps[curr][i];
				shi.options.add(op);
			 }
		}
		function sanji(){
			var $xian = $("#xian");
			$xian.empty();
			var curr = $("#shen").val();
			var curr1 = $("#shi").val();
			for (var index in emps[curr][curr1]) {
				var op = document.createElement("option");
				op.text=emps[curr][curr1][index];
				op.value= emps[curr][curr1][index];
				xian.options.add(op);
			}
		}
	</script>
</html>

Gadxiong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现select的三级联动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级联动&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js&
复制链接

扫一扫