省市联动下拉框实现-优快云博客

本文链接：https://blog.youkuaiyun.com/NewBeeMu/article/details/98206422

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			select{
				width: 200px;
				height: 25px;
			}			
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script>
			$(function(){
				
				//1、两个数组 省级数组一维，市级信息是二维的
				var pro_array =["内蒙古自治区","广东省","河北省","北京市","河南省"];
				var city_array = [["呼和浩特市","包头市","赤峰市","锡林郭勒盟"],["东莞市","佛山","珠海","深圳","中山"],["石家庄","保定","邯郸","唐山"],["朝阳区","海淀区","丰台区","大兴区"],["郑州","开封","洛阳","南阳"]];
				/*
				1.两个数组，省级数组一维，市级信息是二维
				2.将省级信息填充到省级下拉列表中
				3.省级下拉列表绑定change事件
				4.获取省级当前选中的value的值
				5.根据value值获取到相对应的市级数组
				6.将市级数组填充到市级下拉列表中
				*/
			   //2
			   var pro_str = "<option>==请选择==</option>";
			   $.each(pro_array,function(index,value){
				   pro_str+="<option value="+index+">"+value+"</option>";
				   
			   });
			   $("#pro").html(pro_str);
			   //3
			   
			   $("#pro").change(function(){
				   //清空之前的内容
				   var city_str = "";
				   //alert($(this).val());
				   var index = $(this).val()
				   var city_list = city_array[index];
				   for(var i=0;i<city_list.length;i++){
					   // 10 24  
					   //alert(city_list[i]);
					   city_str+="<option value="+i+">"+city_list[i]+"</option>";
				   }
				     $("#city").html(city_str);
			   });
			 
				
				
			});
		</script>
		
	</head>
	<body>
		<center>
			<h4>全国省市联动</h4>
			<select id="pro">
				
			</select>
			<select id="city">
				<option>==请选择==</option>				
			</select>
		</center>
	</body>
</html>

省市联动（修改版）