jQuery下拉框联动(JQ遍历&JQ中DOM操作)

最新推荐文章于 2022-05-08 16:14:06 发布

_Rick

最新推荐文章于 2022-05-08 16:14:06 发布

阅读量496

点赞数

分类专栏： Java 前端

本文链接：https://blog.csdn.net/weixin_44718300/article/details/88747203

版权

Java 前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/88746796

2.代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js.css" ></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>

_Rick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery下拉框联动(JQ遍历&JQ中DOM操作)

1.下载jQuery，并导入：https://blog.csdn.net/weixin_44718300/article/details/887467962.代码实现：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫