js实现二级三级联动

最新推荐文章于 2023-05-27 21:26:14 发布

谦卑的学生

最新推荐文章于 2023-05-27 21:26:14 发布

阅读量262

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45925436/article/details/106394684

版权

代码的解析请跳转到:https://blog.csdn.net/weixin_45925436/article/details/106364412

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<table border="1">
<tr>
				<td>籍贯</td>
				<td>
				省
					<select  onchange="citys()" id="pronvice">
						<option value="-1" selected>请选择
					</select>
				市
					<select id="city" onchange="xians()">
						<option value="-1" selected>请选择
					</select>
				县
					<select id="xian" onclick="dj()">
						<option value="-1" selected>请选择
					</select>
				</td>
				<td><span id="span4"></span></td>

			</tr>
			</table>
			</body>
			<script type="text/javascript">
			//三级联动
	 var arr = [  [1,"河南",0],[2,"河北",0],[3,"陕西",0],
							   [11,"洛阳",1], [12,"偃师市",1],
							   [111,"白马寺",11], [112,"首阳山",12],
							   [21,"石家庄",2],[22,"邯郸",2],
							   [211,"大名",21],[212,"魏县",22],
							   [31,"西安",3],
							   [311,"长安",31],[311,"宝鸡",31],
				          ];
	 province();
					//获取省的数据  纵坐标是固定的
				    function province(){
						var str = "<option value='-1'>请选择</option>";
						for(var i=0;i<arr.length;i++){
							//alert(arr[i][2]);
							if(arr[i][2]==0){
								str+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>";
							}
						}
						//alert(str);
						//给省的下拉列表赋值
						document.getElementById("pronvice").innerHTML=str;
					}
					//加载市的数据
					function citys(){
						var pro = document.getElementById("pronvice").value;
						//alert(pro);
						var str = "<option value='-1'>请选择</option>";
						for(var i=0;i<arr.length;i++){
							if(arr[i][2]==pro){
								str+= "<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>";
							}
						}
						//alert(str);
						//给市的下拉列表赋值
						document.getElementById("city").innerHTML=str;
						
					}   
					function xians(){
						var pro = document.getElementById("city").value;
						//alert(pro);
						var str = "<option value='-1'>请选择</option>";
						for(var i=0;i<arr.length;i++){
							if(arr[i][2]==pro){
								str+= "<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>";
							}
						}
						//alert(str);
						//给市的下拉列表赋值
						document.getElementById("xian").innerHTML=str;
						
					}
			</script>
			</html>