简单版js实现省市二级联动

选择省份,对应省份下的城市选项随之改变。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>二级联动</title>
</head>
<body>    
<form action="">        
<div>            
<select name="" id="province" onchange="selectCity()">                
<option>请选择省份</option>                
<option>山西省</option>                
<option>陕西省</option>                
<option>江西省</option>                
<option>四川省</option>                
<option>河南省</option>            
</select>        
</div>        
<div>            
<select name="sltCity" id="city">                
<option>请选择市区</option>            
</select>        
</div>    
</form>
</body>
<script>    
var cityInfo = [
	["请选择市区", "太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
        ["请选择市区", "西安市", "咸阳市", "汉中市", "延安市", "榆林市"],
        ["请选择市区", "南昌市", "九江市", "鹰潭市", "上饶市", "景德镇市"],
        ["请选择市区", "成都市", "绵阳市", "雅安市", "乐山市", "眉山市"], 
        ["请选择市区","驻马店市","郑州市","南阳市","周口市"] 
        ];//二维数组用来存储数据,第一层和省份选项索引有对应关系,第二层为每个省份下的城市选项
    function selectCity() {
	var pro = document.getElementById("province");
	var cit = document.getElementById("city");
	var selectParam = cityInfo[pro.selectedIndex - 1];//获取对应省份下的数组
	cit.length = 1;//每次清空选项,只留一个提示项
	for (var i = 0; i < selectParam.length; i++) {
	 cit[i] = new Option(selectParam[i], selectParam[i]);
	 }
	 console.log(cit.length);//测试用
	 }
	 </script>
</html>

下面为结果展示:
简单版js实现省市二级联动_第1张图片简单版js实现省市二级联动_第2张图片
可以看到选择不同的省份,下面的选项随之发生变化。

你可能感兴趣的:(简单版js实现省市二级联动)