Jquery 实现下拉列表三级联动

需求: (1) 根据省、获得市、

(2) 通过市，再获得到县，

(3) 每个下拉框数据都由一个数组组成;

效果：

初始页面

加载省份

通过选择省份，获得对应的市

再通过市，获得对应的区

HMTL代码：

<body>
		省份：<select id="selProvince">
			<option value="-1">--请选择--</option>
		</select>
		城市：<select id="selCity">
			<option value="-1">--请选择--</option>
		</select>
		</select>
		区：<select id="selArea">
			<option value="-1">--请选择--</option>
		</select>
	</body>

<script type="text/javascript">
	$(function(){
		//初始化参数
		var provinces = ['浙江','江苏','安徽'];
        var citys =[['杭州','宁波','温州'],['南京','无锡','苏州'],['合肥','安庆','黄山']];
        var aears =[ [['上城区','下城区','西湖区','拱墅区'],['江北区','慈溪市'],['鹿城区','乐清市']],
        [['玄武区','鼓楼区'],['滨湖区','宜兴市 '],['虎丘区','姑苏区']],
        [['庐阳区','长丰县'],['迎江区','桐城市'],['黄山区','休宁县']]];

       // alert(provinces.length);
        //add province
        for (var i = 0; i <provinces.length; i++) {
        	  $("#selProvince").append("<option value=p"+i+">"+provinces[i]+"</option>");
        }
        
        var pIndex=0;
        
        //provinces change
        $("#selProvince").change(function(){
        	
        	//第一个不移除
        	$("#selCity").children().not(":first").remove();

        	//select province value=>index
        	 pIndex=$(this).children("option:selected").index();
        	
        	//city index from 0;
        	var city =citys[pIndex-1];
        	//循环
        	for (var i = 0; i < city.length; i++) {
        		  $("#selCity").append("<option value=c"+i+">"+city[i]+"</option>");
        	}
        	
        });
        
        
        //citys change
         $("#selCity").change(function(){
         	//第一个不移除
        	$("#selArea").children().not(":first").remove();
        	
        	//获得city的索引
        	var cIndex=$(this).children("option:selected").index();
        	
        	//获得area
        	var are=aears[pIndex-1][cIndex-1];
        	
        	for (var i = 0; i < are.length; i++) {
        		  $("#selArea").append("<option value=a"+i+">"+are[i]+"</option>");
        	}
        	
         	
         });
       
        
     });
      
</script>

Jquery 实现下拉列表三级联动

猜你喜欢