使用JavaScript完成省市联动效果

程序员文章站 2022-03-07 08:41:53

省市联动效果技术分析什么是DOM: Document Object Model : 管理我们的文档，增删改查规则【HTML中的DOM操作】一些常用的 HTML DOM 方法： getElementById(id) 获取带有指定 id 的节点（元素） appendChild(node) 插入新 ......

省市联动效果

技术分析

什么是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中添加节点-->
		<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>

使用JavaScript完成省市联动效果