实现select的三级联动_select 三级联动走接口-优快云博客

本文链接：https://blog.youkuaiyun.com/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>