JavaScript实现省市联动效果

最新推荐文章于 2023-09-07 08:47:31 发布

我不做大哥好多年

最新推荐文章于 2023-09-07 08:47:31 发布

阅读量176

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44810919/article/details/104402163

版权

知识点：
1.createElement：创建元素
2.setAttribute：设置属性
3.appendChild：向节点添加最后一个子节点。
4.onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市联动</title>
	<style type="text/css">
		.box{
			width: 600px;
			padding: 20px;
			border: 2px solid red;
			border-radius: 4px;
			margin: 100px auto;
		}
		.box select{
			width: 150px;

		}
		.box label{
			margin: 0 20px;
		}
	</style>
	<script type="text/javascript">
		var provs = [{"id":"01","pName":"河南省"},{"id":"02","pName":"河北省"},{"id":"03","pName":"山西省"},{"id":"04","pName":"山东省"},{"id":"05","pName":"四川省"}];
        	var citys = [{"id":"001","cName":"安阳市","pId":"01"},{"id":"002","cName":"郑州市","pId":"01"},{"id":"003","cName":"新乡市","pId":"01"},{"id":"004","cName":"石家庄","pId":"02"},{"id":"005","cName":"邯郸","pId":"02"},{"id":"006","cName":"大同","pId":"03"},{"id":"007","cName":"太原","pId":"03"},{"id":"008","cName":"济南","pId":"04"},{"id":"009","cName":"青岛市","pId":"04"},{"id":"010","cName":"成都","pId":"05"},{"id":"011","cName":"绵阳市","pId":"05"}];
        window.onload =function(){
        	//加载所有省份
        	var selProv=document.getElementById('province');
        	for(var i=0;i<provs.length;i++){
        		 // 动态创建1个option标签的Dom对象
        		var optProv= document.createElement('option');
        		// 设置当前选项的value和 文本 
        		optProv.setAttribute('value',provs[i].id);
        		optProv.innerHTML = provs[i].pName;
                //把这个DOM对象，插入到当前DOM、树的合适位置。
                selProv.appendChild(optProv);

        	}
        	//动态加载城市
            var selCity = document.getElementById('city');
            selProv.onchange =function(){
                //seleCity.innerHTML = '';清空城市选项1
                selCity.options.length =0;//清空城市选项2
                var pId =this.value;//拿到所选省份的id
                for(var i= 0;i<citys.length ;i++){
                    if(citys[i].pId==pId){
                        var optCity =document.createElement('option');
                        optCity.setAttribute('value',citys[i].id);
                        optCity.innerHTML = citys[i].cName;
                        selCity.appendChild(optCity);
                    }
                }
            }

        }
	</script>
</head>
<body>
	<div class="box">
		请选择你所在的城市：
		<select id="province">
			<option value="00">请选择</option>
		</select><label for="provice">省</label>
		<select id="city">
			<option value="000">请选择</option>
		</select><label for="provice">市</label>
	</div>
</body>
</html>

我不做大哥好多年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现省市联动效果

知识点：1.createElement：创建元素2.setAttribute：设置属性3.appendChild：向节点添加最后一个子节点。4.onchange 事件会在域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。<!DOCTYPE html><html lang="en"><head> <meta...
复制链接

扫一扫