HTML下拉列表效利用JavaScript实现省市联动果

最新推荐文章于 2022-05-26 16:41:02 发布

BUG制造者:图图

最新推荐文章于 2022-05-26 16:41:02 发布

阅读量2.8k

点赞数 1

分类专栏： HTML JavaScript 文章标签：列表 js css javascript html

本文链接：https://blog.csdn.net/qq_37428797/article/details/106236966

版权

JavaScript 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

HTML

27 篇文章 0 订阅

订阅专栏

什么是DOM: Document Object Model : 管理我们的文档，增删改查规则
【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			/*动态添加 :   <p>文本</p> */
			function dianwo(){
				var div = document.getElementById("div1");
				//创建元素节点
				var p = document.createElement("p");  // <p></p>
				//创建文本节点
				var textNode = document.createTextNode("文本内容");//  文本内容
				
				//将p 和文本内容关联起来
				p.appendChild(textNode);  //  <p>文本</p> 
				
				//将P添加到目标div中
				div.appendChild(p);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="点我,添加P" onclick="dianwo()" />
		
		<div id="div1">
			
		</div>
	</body>
</html>
代码实现
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
				准备工作 : 准备数据
			*/
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			/*
				1. 确定事件:  onchange
				2. 函数: selectProvince()
				3. 函数里面要搞事情了
					得到当前操作元素
					得到当前选中的是那一个省份
					从数组中取出对应的城市信息
					
					动态创建城市元素节点
					添加到城市select中
					
			*/
			function selectProvince(){
				var province = document.getElementById("province");
				//得到当前选中的是哪个省份
				//alert(province.value);
				var value = province.value;
				//从数组中取出对应的城市信息
				var cities = provinces[value];
				var citySelect = document.getElementById("city");
				//清空select中的option
				citySelect.options.length = 0;
				
				for (var i=0; i < cities.length; i++) {
//					alert(cities[i]);
					var cityText = cities[i]; 
					//动态创建城市元素节点   <option>东莞市</option>
					
					//创建option节点
					var option1 = document.createElement("option"); // <option></option>
					//创建城市文本节点
					var textNode = document.createTextNode(cityText) ;// 东莞市
					
					//将option节点和文本内容关联起来
					option1.appendChild(textNode);  //<option>东莞市</option>
					
//					添加到城市select中
					citySelect.appendChild(option1);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<select onchange="selectProvince()" 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>

BUG制造者:图图

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML下拉列表效利用JavaScript实现省市联动果

什么是DOM: Document Object Model : 管理我们的文档，增删改查规则【HTML中的DOM操作】一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：innerHTML - 节点（元素）的文本值parentNode - 节点（元素）的父节点childN.
复制链接

扫一扫