HTML——JS—表单的change事件

最新推荐文章于 2022-12-22 17:36:27 发布

Jhinhua

最新推荐文章于 2022-12-22 17:36:27 发布

阅读量1.2k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104942465

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		<!-- 
		省市联动 
		 -->
		 
		<select class="province"></select>
		<select class="city"></select>
		 
		
		<script>
			/**
			 * 数据结构：
			 * 		有很多的省份
			 * 				每个省份下有很多的市
			 * 
			 * 	[{
				  province_name:"河北",
			 * 	  cities:["石家庄","保定","唐山","秦皇岛"...]
			 * },
			 * 
			 * {
				  province_name:"河北",
			 * 	  cities:["石家庄","保定","唐山","秦皇岛"...]
			 * },
			 * 
			 * {
				  province_name:"河北",
			 * 	  cities:["石家庄","保定","唐山","秦皇岛"...]
			 * }]
			 */
			
			var province_arr = [
				{
					province_name:"北京",
					cities:["海淀区","朝阳区","丰台区","怀柔区"]
				},
				{
					province_name:"河北省",
					cities:["石家庄","唐山","保定","秦皇岛","衡水","沧州"]
				},
				{
					province_name:"河南省",
					cities:["郑州","安阳","信阳","濮阳","洛阳","驻马店"]
				},
				{
					province_name:"山东省",
					cities:["菏泽","青岛","济南","烟台","威海","德州","济宁"]
				}
			]
			
			// 获取省份的下拉菜单
			var province_select = document.querySelector(".province")
			// 获取市的下拉菜单
			var city_select = document.querySelector(".city")
			
			// 页面初始化的时候 加载所有的省份 与第一个省份对应的市
			function init(){
				// 遍历数组 获取所有的省份
				for(var i = 0; i < province_arr.length; i++){
					//province_arr[i]  小对象  要获取省份的名字 需要在对象中提取
					// 有一个省份 就在下拉菜单中有一个选项 就相当于有一个option的元素
					// 在HTML上有一个option标签 就有一个option对象
					var option = new Option(province_arr[i].province_name, province_arr[i].province_name)
					// 添加在指定的下拉菜单上
					province_select.appendChild(option)
				}
				
				// 获取第一省份下的所有市  添加在市的下拉菜单中
				var cities = province_arr[0].cities
				// 对其进行遍历  添加到市的下拉菜单中
				for(var i = 0; i < cities.length; i++){
					var option = new Option(cities[i], cities[i])
					city_select.appendChild(option)
				}
				
			}
			
			// 省份的数据发生变化
			province_select.onchange = function(e){
				// 更新市的下拉菜单发生对应的变化
				// 用户选择的省份是哪个？？？？
				// 下拉菜单有一个属性 selectedIndex 获取的是被选中项目的索引
				// 根据这个索引获取选择的省份
				var province = province_arr[this.selectedIndex]
				// 获取该省份下的所有市
				var cities = province.cities
				
				// 在选择省份 更新市的下拉菜单时  市之前的选项应该给移除掉
				// 否则 数据全部叠加在一起了
				// 下拉菜单有一个属性  length  获取的下拉菜单中选项的数量
				// length市可以获取 也可以重置的
				city_select.length = 0
				
				// 对其进行遍历  添加到市的下拉菜单中
				for(var i = 0; i < cities.length; i++){
					var option = new Option(cities[i], cities[i])
					city_select.appendChild(option)
				}
			}
			
		</script>
		 
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——JS—表单的change事件

案例 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body onload="init()">  &l...
复制链接

扫一扫