js实现 select 三级联动

最新推荐文章于 2023-04-10 16:04:51 发布

我家兔子爱挑食

最新推荐文章于 2023-04-10 16:04:51 发布

阅读量494

点赞数 1

分类专栏：前端文章标签： js实现select三级联动

本文链接：https://blog.csdn.net/weixin_44491927/article/details/96888427

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select 三级联动</title>
</head>
<body>
	<div class="address-wrap">
        <select id="provice">
            <option>请选择省</option>
        </select>
        <select id="city">
            <option>请选择市</option>
        </select>
        <select id="county">
            <option>请选择区/县</option>
        </select>
    </div>
    <script type="text/javascript">
    var myId = function(id){
    	return document.getElementById(id);
    }
	//省份
	var arr_provice = [
		"河南省",
		"河北省",
		"江苏省"
	];
	//市区
	var arr_city = [
		["新乡市","商丘市"],
		["北京市","廊坊市"],
		["苏州市","南京市","扬州市"],
	];
	//区县
	var arr_county = [
		[
			["卫滨区","红旗区"],
			["梁园区","民权县"]
		],
		[
			["朝阳区","西城区"],
			["这个区","那个区"]
		],
		[
			["姑苏区","虎丘区","吴中区"],
			["玄武区","秦淮区","鼓楼区"],
			["广陵区","邗江区","江都区","宝应县"]
		]
	];
	//选择省份
	for (var i = 0; i < arr_provice.length; i++) {
		var myProvince = arr_provice[i];
		myId("provice").appendChild(new Option(myProvince));
	}
	//选择相应的市区
	myId("provice").onchange = function(){
		//初始化市县
		myId("city").options.length = 1;
		myId("county").options.length = 1;
		
		//使选择下拉框内容的index与数组的下标对应相等;
		pro_index = myId("provice").selectedIndex - 1;
		if (pro_index > -1) {
			//填入相应的市区
			for (var i = 0; i < arr_city[pro_index].length; i++) {
				var myCity = arr_city[pro_index][i];
				myId("city").appendChild(new Option(myCity));
			}
		}
	}
	//选择相应的区县
	myId("city").onchange = function(){
		//初始化选项
		myId("county").length = 1;

		var mar_index = myId("city").selectedIndex - 1;
		if (mar_index > -1) {
			for (var i = 0; i < arr_county[pro_index][mar_index].length; i++) {
				var myCounty = arr_county[pro_index][mar_index][i];
				myId("county").appendChild(new Option(myCounty));
			}
		}		
	}
    </script>
</body>
</html>