jQuery省市二级联动实现

最新推荐文章于 2024-04-10 13:39:59 发布

二不午

最新推荐文章于 2024-04-10 13:39:59 发布

阅读量2.7k

点赞数 1

分类专栏： JavaWeb 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43151608/article/details/96017528

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市联动</title>

		<script src="../js/jquery-1.11.3.min.js"></script>

		<script>
			var province = ["湖北", "湖南", "广东", "河北"]

			var city = [
				["武汉", "黄冈", "十堰"],
				["长沙", "岳阳", "怀化"],
				["深圳", "广州", "惠州"],
				["石家庄", "天津", "常德"]
			];

			$(function() {
				//初始化数据
				initData();
 				//为省份下拉列表绑定change事件
				$("#pro").change(function() {
					var index = $(this).val();
					$("#city").html("<option>请选择</option>");
					$(city[index]).each(function(i, obj) {

						var option = "<option value='" + i + "'>" + obj + "</option>"
						$("#city").append(option);
					})
				})
			})

			function initData() {
			 //初始化省份下拉列表
				$(province).each(function(index, obj) {
					var option = "<option value='" + index + "'>" + obj + "</option>"
					$("#pro").append(option);

				})
			}
		</script>

	</head>

	<body>
	<select id="pro">

		<option>请选择</option>

	</select>

	<select id="city">

		<option>请选择</option>

	</select>

	</body>

	
</html>

二不午

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
jQuery省市二级联动实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市联动</title> <script src="../js/jquery-1.11.3.min.js"></script> <script> ...
复制链接

扫一扫