jQuery实现下拉列表的二级联动

jQuery 专栏收录该内容
12 篇文章 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>用jQuery实现下拉框的二级联动</title>
<script src="../../resource/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">

	$(function(){
		//1.创建一个二维数组用于存放城市
		var cities=new Array(3);
		cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
		cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
		cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
		cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
		
		$("#province").change(function() {
			//2.获取所选中的省份的下拉列表
			var index=this.value;
			
			//10.清空第二个列表
			$("#city").empty();
			
			//3.遍历二维数组
			$.each(cities, function(x, cityArr) {
				//4.判断遍历的省份和所选中的省份是否相同
				if(index==x){
					//5.遍历选中省份的城市列表
					$.each(cities[x], function(y, city) {
						//6.创建城市文本节点
						 var textNode=document.createTextNode(city);
						 //7.创建option节点
						 var optionNode=document.createElement("option");
						 //8.将城市文本节点添加到option节点中
						 $(optionNode).append(textNode);
						 //9.将option元素节点追加到第二个元素列表
						 $(optionNode).appendTo($("#city"));
					})
				}
			})
			
		})		
		
	})
	
	
</script>
</head>
<body>
	<table>
		<tr>
			<td>籍贯</td>
			<td><select id="province" ο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>
用js实现下拉列表的二级联动请看上一篇博文 哦了~  奋斗 奋斗 奋斗
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

小猴子豆芽菜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值