省市二级联动

话不多说,直接上代码。

​
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="js/jquery-3.2.1.js"></script>
</head>

<body>
	<select name="" id="selProvince">
	    <option value="">--请选择--</option>
	</select>
	<select name="" id="selCity">
	    <option value="">--请选择--</option>
	</select>
	<script>
	    var iNum1;
		var iNum2;
		var aProvince = ['湖北', '湖南', '广东'];
	    var aCity = [
			['武汉', '襄阳', '荆州'],
		    ['长沙', '株洲', '湘潭'],
		    ['广州', '深圳', '东莞']
		];
		$(function () {
	        for (var i=0;i<aProvince.length;i++) {
	            $("#selProvince").append('<option>'+ aProvince[i] + '</option>');
	        };
			
			/*当元素的值发生改变时,会发生 change 事件*/
       $("#selProvince").change(function(){
		   /*':eq'匹配一个给定索引值的元素*/
       $('#selCity').children().not(':eq(0)').remove();
           iNum1 = $(this).children("option:selected").index();
		var aaCity = aCity[iNum1-1];
		for(var j = 0;j<aaCity.length;j++){
			$('#selCity').append('<option>'+ aaCity[j] + '</option>');
			 }
	   	});	
  });	

​

 

上一篇:21. 自定义类与双下划线方法


下一篇:动画效果 滑入滑出