用js实现下拉框的二级联动

最新推荐文章于 2023-11-04 00:01:35 发布

小猴子豆芽菜

最新推荐文章于 2023-11-04 00:01:35 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript jQuery 文章标签：二级联动

本文链接：https://blog.csdn.net/XU906722/article/details/79316278

版权

jQuery 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>用js实现下拉框的二级联动</title>

<script type="text/javascript">

	//1.创建一个二维数组用于存放城市
	var cities=new Array(3);
	cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
	
	//方法一：用js实现
	function changeCity(index){
	
		//7.获取第二个下拉列表
		var cityNode=document.getElementById("city");
		
		//9.初始化第二个列表，清空数据
		cityNode.options.length=0;
		
		//2.遍历二维数组中的省份与选中的省份进行比较，注意比较的是下标
		for(var x=0;x<cities.length;x++){
		//判断选中的省份
			if(index==x){
				//3.遍历所选中省份下的城市列表
				for(var y=0;y<cities[x].length;y++){
					//4.创建城市的文本节点
					var textNode=document.createTextNode(cities[x][y]);
					//5.创建option元素节点
					var optionNode=document.createElement("option");
					//6.将城市的文本节点添加到option元素节点中
					optionNode.appendChild(textNode);
					//8.将option元素节点添加到第二个城市列表中
					cityNode.appendChild(optionNode);
				}
			}
		}
	}	
</script>
</head>
<body>
	<table>
		<tr>
			<td>籍贯</td>
			<td><select οnchange="changeCity(this.value)">
					<option>--请选择--</option>
					<option value="0">湖北</option>
					<option value="1">湖南</option>
					<option value="2">河北</option>
					<option value="3">河南</option>
			</select>
			<select id="city">
			</select></td>
	</table>
</body>

</html>

用jQuery实现二级联动的方法请参考下一篇博文哦了~

小猴子豆芽菜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用js实现下拉框的二级联动

&lt;!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;用js实现下拉框的二级
复制链接

扫一扫