使用JQ完成省市联动效果

最新推荐文章于 2022-11-03 14:34:47 发布

无你处、无江湖

最新推荐文章于 2022-11-03 14:34:47 发布

阅读量189

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42675691/article/details/100011607

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

使用JQ完成省市联动效果

需求分析:

在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

准备工作 : 城市信息的数据
添加节点 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 给自己找一个爹,将自己添加到别人家里
3. prepend : 在子元素前面添加
4. after : 在自己的后面添加一个兄弟
遍历的操作:

步骤分析:

导入JQ的文件
文档加载事件:页面初始化
进一步确定事件: change事件
函数: 得到当前选中省份
得到城市, 遍历城市数据
将遍历出来的城市添加到城市的select中

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			/*
				准备工作 : 准备数据
			*/
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			
			/*
			1. 导入JQ的文件
			2. 文档加载事件:页面初始化
			3. 进一步确定事件:  change事件
			4. 函数: 得到当前选中省份
			5. 得到城市, 遍历城市数据
			6. 将遍历出来的城市添加到城市的select中
			*/
			
			$(function(){
				$("#province").change(function(){
//					alert(this.value);
					//得到城市信息
					var cities = provinces[this.value];
					//清空城市select中的option
					/*var $city = $("#city");
					//将JQ对象转成JS对象
					var citySelect = $city.get(0)
					citySelect.options.length = 0;*/
					
					$("#city").empty();  //采用JQ的方式清空
					//遍历城市数据
					$(cities).each(function(i,n){
						$("#city").append("<option>"+n+"</option>");
					});
				});
			});
		</script>
	</head>
	<body>
		<!--选择省份-->
		<select id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<!--选择城市-->
		<select id="city">
			
		</select>
	</body>
</html>

在这里插入图片描述

无你处、无江湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQ完成省市联动效果

使用JQ完成省市联动效果需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市技术分析:准备工作 : 城市信息的数据添加节点 : appendChild (JS)append : 添加子元素到末尾appendTo : 给自己找一个爹,将自己添加到别人家里prepend : 在子元素前面添加a...
复制链接

扫一扫