jQuery省市联动_jquery省市二级联动-CSDN博客

本文链接：https://blog.csdn.net/csdnluolei/article/details/83958374

用jQuery实现省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript">
			
			var provinces = [
				["武汉市","十堰市","襄阳市","黄冈市"],
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
	
			$(function(){
				selectProvince();
			});
			
			function selectProvince(){
				
				var province = $("#province");
				//得到当前选中的是哪个省份
				var value = province.val();
				//从数组中取出对应的城市信息
				var cities = provinces[value];
				
				var citySelect = $("#city"); 
				//清空select中的option	
				citySelect.empty();
				
				for (var i=0; i < cities.length; i++) {
					//添加option
					citySelect.append('<option>'+ cities[i] + '</option>')	
				}
				
			}
			
		</script>
	</head>
	<body>
		<!--选择省份-->
		<select onchange="selectProvince()" id="province">
			<option value="0">湖北省</option>
			<option value="1">广东省</option>
			<option value="2">湖南省</option>
			<option value="3">福建省</option>
		</select>
		<!--选择城市-->
		<select id="city"></select>
	</body>
</html>