js的省市联动案例

最新推荐文章于 2022-11-12 01:00:56 发布

小蝌蚪找玛玛

最新推荐文章于 2022-11-12 01:00:56 发布

阅读量267

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/weixin_44679832/article/details/90399379

版权

JavaScript学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动案例</title>
</head>
<body>
    <!-- 当我们选取下拉列表某一项时，就会执行onchange事件 -->
    <select id="province" onchange="addCity(this.value)">
        <option>--请选择省份--</option>
	<option value="北京">北京</option>
	<option value="山西">山西</option>
	<option value="河北">河北</option>
	<option value="河南">河南</option>
    </select>
	
    <select id="city">
	<option>--请选择城市--</option>
    </select>
	
    <script type="text/javascript">
		
        // 创建一个二维数组存储数据
	var arr = new Array(4);
	arr[0] = [ "北京", "海淀区", "昌平区", "朝阳区", "顺义区", "怀柔区", "大兴区", "东城区", "西城区" ];
	arr[1] = [ "山西", "太原", "大同", "晋中", "临汾", "运城", "吕梁" ];
	arr[2] = [ "河北", "石家庄", "保定", "邯郸", "衡水", "沧州", "承德", "张家口", "秦皇岛", "唐山" ];
	arr[3] = [ "河南", "郑州", "开封", "洛阳", "驻马店", "三门峡", "周口" ];
		
	function addCity(obj) {
			
	    // alert(obj);
			
	    // 每次向city中添加option之前，先判断city中是否有option(请选择城市除外)，如果有，删除原来的option
			
	    // 获取id=city的select标签
	    var citySelect = document.getElementById("city");
			
	    // 获取citySelect下的option标签
	    var cityOption = citySelect.getElementsByTagName("option");
			
	    // 遍历数组
	    for (var k = 1; k < cityOption.length; k++) {
				
	        // 得到每一个option
		var op = cityOption[k];
				
		// 通过父节点删除这个op
		citySelect.removeChild(op);
		k--;
	    }
			
	    // 遍历二维数组
	    for (var i = 0; i < arr.length; i++) {
				
	        // 得到二维数组里的每一个数组
		var innerArr = arr[i];
				
		// 得到每个数组的第一个值
		var firstValue = innerArr[0];
				
		// 如果传递过来的值和第一个值相同
		if (obj == firstValue) {
					
		    // 遍历innerArr，得到第一个值后面的元素
		    for (var j = 1; j < innerArr.length; j++) {
						
		        // 得到城市名称
		        var cityName = innerArr[j];
		        // alert(cityName);
						
		        // 创建option元素标签
		        var optionEle = document.createElement("option");
						
		        // 创建文本标签
	                var text = document.createTextNode(cityName);
						
		        // 把文本添加到optionEle里面
		        optionEle.appendChild(text);
						
		        // 把optionEle添加到citySelect里
		        citySelect.appendChild(optionEle);
	            }
	        }
            }
        }
    </script>
</body>
</html>

效果图如下:

小蝌蚪找玛玛

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js的省市联动案例

代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>省市联动案例</title></head><body>  &l...
复制链接

扫一扫