省市二级联动

2021-05-16 09:59:39 阅读：162 来源： 互联网

标签：二级省市 -- iNum1 aaCity 联动 var eq children

话不多说，直接上代码。


<!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>');
			 }
	   	});	
  });

标签：二级,省市,--,iNum1,aaCity,联动,var,eq,children
来源： https://blog.csdn.net/HG13542386794/article/details/116881419

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

省市二级联动