提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端基础 - JQuery实现省级联动

jQuery基础前端 实现 联动
2023-09-11 14:15:41 时间

JQuery实现省级联动

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 定义二维数组:
			var arr = new Array(4);
			arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
			arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
			arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
			arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
		</script>
	</head>
	<script src="../js/jquery-1.11.0.min.js"></script>

	<script type="text/javascript">
		$(function() {
			//获取省份对象  派发change事件
			$("#pro").change(function() {

				//清空市的下拉选中的内容
				//$("#city").empty();
				$("#city").html("");

				//获取省份的value值
				var $flag = $(this).val();

				//通过value值获取对应省份的市的数组
				var cityArrObj = arr[$flag];

				//遍历市的数组
				$(cityArrObj).each(function() {
					//把遍历后的市  添加到市的下拉选中
					//html的方式会覆盖
					//$("#city").html("<option>"+this+"</option>");
					//文档操作的时候是追加
					$("#city").append("<option>" + this + "</option>");
				})
			})
		});
	</script>

	<body>
		<form action="#" method="get">
			<select id="pro">
				<option>-请选择-</option>
				<option value="0">黑龙江</option>
				<option value="1">吉林</option>
				<option value="2">辽宁</option>
				<option value="3">河南</option>
			</select>
			<select id="city">
				<option>-请选择-</option>
			</select>
		</form>
	</body>

</html>

相关文章