省市县三级联动效果源代码在此！！！

本是古典何须时尚 2023-02-09 13:12 31阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]

## 源代码 ##

#### HTML代码 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>省市县三级联动</title>
    	
    	<link rel="stylesheet" href="index.css">
    </head>
    
    <body>
    	
    	<div class="box">
    		<select id="province"></select>
    		<select id="city"></select>
    		<select id="county"></select>
    	</div>
    
    	
    	<script src="index.js" type="text/javascript"></script>
    </body>
    
    </html>

#### CSS代码 ####

*{ 
    	margin: 0;
    	padding: 0;
    }
    .box{ 
    	margin: 100px 0 0 200px;
    }
    select{ 
    	width: 120px;
    	height: 30px;
    }

#### JS代码 ####

// 定义数据源
    var provinces = ["浙江","安徽","江西"];
    var citys = [
    	["杭州市","宁波市","温州市"],
    	["合肥市","宣城市","芜湖市"],
    	["南昌市","九江市","上饶市"]
    ];
    var countys = [
    	[
    		["西湖区","拱墅区","江干区"],
    		["海曙区","江北区","镇海区","北仑区"],
    		["龙湾区","洞头区","瑞安市","鹿城区"]
    	],	
    	[
    		["蜀山区","瑶海区","庐阳区","包河区","长风区","肥西县"],
    		["宣州区","郎溪县","广德县"],
    		["镜湖区","鸠江区","三山区","南陵县"]
    	],
    	[
    		["东湖区","西湖区","湾里区","进贤县","青山湖区","青云谱区","安义县","新建区"],
    		["浔阳区","柴桑区","修水县","武宁县","德安县"],
    		["信州区","三江新区","广丰区"]
    	]
    ];
    
    /* 获取DOM节点 */
    var pro = document.getElementById("province");
    var city = document.getElementById("city");
    var county = document.getElementById("county");
    
    // 设置默认显示的数据
    // 省
    var str="";
    
    for(var i=0; i<provinces.length; i++){ 
    	// 拼接字符串
    	str += "<option>"+provinces[i]+"</option>";
    }
    // 把字符串设置给控件
    province.innerHTML = str;
    
    // 市
    str="";
    for(var i=0; i<citys[0].length; i++){ 
    	str += "<option>"+citys[0][i]+"</option>";	
    }
    city.innerHTML = str;
    
    // 县
    str="";
    for(var i=0; i<countys[0][0].length; i++){ 
    	str += "<option>"+countys[0][0][i]+"</option>";
    }
    county.innerHTML = str;
    
    // 默认为第一个省
    var index_pro=0;
    
    // 更新省
    
    pro.onchange = function(){ 
    	str = "";	
    	// 返回当前选中的选项的下标
    	index_pro = this.selectedIndex;
    	// console.log(index_pro);
    	
    	// 修改为对应的市
    	for(var i=0; i<citys[index_pro].length; i++){ 
    		str += "<option>"+citys[index_pro][i]+"</option>";
    	}
    	city.innerHTML = str;
    
    	// 修改市(调整省后，默认显示第一个市)所对应的县
    	str = "";
    	for(var i=0; i<countys[index_pro][0].length; i++){ 
    		str += "<option>"+countys[index_pro][0][i]+"</option>";
    	}
    	county.innerHTML = str;
    }
    
    // 更新市
    city.onchange = function(){ 
    	str = "";
    	var index_city = this.selectedIndex;
    	for(var i=0; i<countys[index_pro][index_city].length; i++){ 
    		str += "<option>"+countys[index_pro][index_city][i]+"</option>";
    	}
    	county.innerHTML = str;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518214115916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0,size_16,color_FFFFFF,t_70