JQuery实现二级联动

平桥

已于 2024-03-18 21:12:32 修改

阅读量1.4k

点赞数 3

文章标签： java eclipse jquery

于 2022-04-06 21:45:53 首次发布

本文链接：https://blog.csdn.net/qq_43379611/article/details/124000915

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>二级联动_JQ</title>
		<style>	
			
		</style>
		<script src="jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<!--下拉框-->
		省会：
		<select  id="pro">
			<option >请选择</option>
			<option value="0" >江苏</option>
			<option value="1" >安徽</option>
			<option value="2" >山东</option>
		</select>
		城市：
		<select id="city">
			
		</select>
	</body>
	<script>
	  
		$("#pro").on("change",function(){
			//二维数组:模拟数据
			var cityArr=[["南京","苏州","无锡"],["蚌埠","合肥"],["日照","青岛","济南"]];
			//找省会节点
			var $proEles=$("select:first");
			//使用value值区分省会
			var proVal=parseInt($(this).val());
			//获取城市数据
			var cityAry=cityArr[proVal];
			//找城市节点
			var $cityEle=$("select:last");
			//清空城市列表
			 $("#city").empty(); 
			//遍历城市数据，往城市列表添加
			for(var i=0;i<cityAry.length;i++){
				//创建节点
				var cityOp=document.createElement("option");
				$(cityOp).html(cityAry[i]);
				$(cityOp).val(i);
				//指定位置
				$cityEle.append($(cityOp));
			}
			
		
		});
	</script>
</html>