js的DOM对象的应用--省市联动

最新推荐文章于 2021-06-04 16:57:02 发布

Code老大爷

最新推荐文章于 2021-06-04 16:57:02 发布

阅读量312

点赞数

分类专栏： java js 省市联动 DOM

本文链接：https://blog.csdn.net/w2232097312/article/details/52421457

版权

java js 省市联动 DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.使用js写出省市联动：

createElement()

getElementById()

getElementsTagName()

appendChild()

removeChild()

parentNode

childNodes

setAttribute()

innerHTML

innerTEXT

2.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	
	//window.onload = province;
	
	//当选择框获得焦点，就触发事件
	function province(select) {
		
		//如果选择框有值就不再加载
		if(select.value != "请选择"){
			return ;
		}
		
		var pname = ["北京","上海","广东"];
		
		var selectEle = document.getElementById("province");
		selectEle.innerHTML="<option>请选择</option>";
		
		//遍历省，并添加节点
		for(x in pname){
			var option = document.createElement("option");
			option.setAttribute("value", x);
			option.innerHTML = pname[x];
			selectEle.appendChild(option);
		}
		//alert("load province success!");
	}
	
	//加载城市
	function city(select){
		
		var cname = [
		          	 ["海淀区","朝阳区","丰台区"],
					 ["黄浦区","卢湾区","长宁区"],
					 ["广州市","深圳市","珠海市"]
					];
		//添加城市的option标签
		with(select){
			
			if(value){
					
					var select = document.getElementById("city");
					//删除城市的节点
					select.innerHTML="<option>请选择</option>";
					//获取值为value的城市
					 for(var x=0;x<cname[value].length;x++){
						var option = document.createElement("option");
						option.setAttribute("value", cname[value][x]);
						option.innerHTML = cname[value][x];
						select.appendChild(option);
						//console.log(cname[value][x]);
					} 
				
			}
			
			
		}
		
		//alert("load city success!");
	}
	
	
	
</script>

</head>
<body>

	<select name="province" id="province" οnfοcus="province(this);" οnchange="city(this);">
		<option>请选择</option>
		<!-- <option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="gd">广东</option> -->
	</select>

	<select name="city" id="city">
		<option>请选择</option>
	</select>

</body>
</html>

Code老大爷

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js的DOM对象的应用--省市联动

1.使用js写出省市联动：createElement()getElementById()getElementsTagName()appendChild()removeChild()parentNodechildNodessetAttribute()innerHTMLinnerTEXT2.代码：Insert title here //
复制链接

扫一扫

专栏目录