JavaScript事件——省市区的三级联动

最新推荐文章于 2023-05-24 14:43:07 发布

原创最新推荐文章于 2023-05-24 14:43:07 发布 · 468 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用JavaScript实现省市区的三级联动效果。通过在页面上创建下拉选择框，并利用onchange事件监听用户的选择。数据存储为三维数组，根据用户选择的省份动态填充市区选项。在添加市区选项时，确保每次只保留与当前省份对应的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#创建一个页面，包含下拉选择框
在下拉框里面有事件：改变事件 onchange事件

#创建一个三维数组，存储数据
每个数组中第一个元素是省份，后面的元素是市区
1、得到也是数组（省市区对应关系）
2、拿到数组中的值和传递过来的值比较，如果相同，获取到值后面的元素
3、得到city的select
4、添加过去（使用）方法
由于每次都要向city里面添加option，第二次添加，会追加
每次添加之前，判断一下city里面是否有选项，如果有，删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
	省:<select id="pro"></select>
	市:<select id="city"></select>
	区:<select id="county"></select>
	<script>
	var arr = [
	    "北京",[
	        "海淀",["海淀1","海淀2","海淀3"],
	        "朝阳",["朝阳1","朝阳2","朝阳3"]
	    ],
	    "山东",[
	        "青岛",["青岛1","青岛2","青岛3"],
	        "济南",["济南1","济南2","济南3"]
	    ],
	    "海南",[
	        "海口",["海口1","海口2","海口3"],
	        "三亚",["三亚1","三亚2","三亚3"]
	    ]
	];
	var pro = document.getElementById("pro");
	var city = document.getElementById("city");
	var county = document.getElementById("county");
	for(var i=0;i<arr.length;i++){
	    if(typeof arr[i]=="string"){
	        /*var option = document.createElement("option");
	        option.innerHTML = arr[i];
	        pro.appendChild(option);*/
	        pro.add( new Option(arr[i],arr[i]));
	        //在pro节点中,add ==>表示添加  new Option表示创建出来option节点
			//参数1》节点中的值, 参数2》vlaue值
	    }
	}
	pro.onchange = function(){
	    for(var i=0;i<arr.length;i++){
	        if(typeof arr[i]=="string"){
	            if(pro.value==arr[i]){
	
	                var brr = arr[i+1];
	                city.innerHTML = "";
	                for(var j=0;j<brr.length;j++){
	                    if(typeof brr[j]=="string"){
	                        city.add(new Option(brr[j],brr[j]));
	                    }
	                }
	            }
	        }
	    }
	}
	city.onchange = function(){
	    for(var i=0;i<arr.length;i++){
	        if(typeof arr[i]!="string"){
	            var brr = arr[i];
	            for(var j=0;j<brr.length;j++){
	                if(typeof brr[j]=="string"){
	                    if(brr[j]==city.value){

	                        var crr = brr[j+1];
	                        county.innerHTML = "";
	                        for(var k=0;k<crr.length;k++){
	                           county.add(  new Option(crr[k],crr[k]) );
	                        }
	                    }
	                }
	            }
	        }
	    }
	}

	</script>
	
	</body>
</html>

效果图：
在这里插入图片描述