完成省市区县三级联动

摘要：select{margin-left:10px;}<div> <p class="auto_address"> 寄货地址: <select name="" id="pro"> </select> <select name

select{margin-left:10px;}

<div>
	<p class="auto_address">
		寄货地址:
		<select name="" id="pro">
			
		</select>
		<select name="" id="city">
			<option value="">--请选择市--</option>
		</select>
		<select name="" id="area">
			<option value="">--请选择区县--</option>
		</select>	
	</p>

	<p class="address">
		详细地址：<span class="pro"></span><span class="city"></span><span class="area"></span>
	</p>
</div>

//第一步 页面刷新获取省份
	$.getJSON('1.json',function(data){
		let option='<option value="">--请选择省--</option>';
		$.each(data,function(i){
			option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
		});
		$('#pro').html(option);
	});
	//当省份发生变化时
	$('#pro').change(function(){
		let proId = $(this).val();//获取当前选择的省份ID
		if(proId!=''){//如果选择了有效的省份
			$('.address .pro').replaceWith('<span class="pro">'+$(this).find(':selected').text()+"</span>");//把选择的省份实时更新到页面中,这里采用替换，避免重复显示
			//当省份发生改变时，立即把后面的城市、区县设为空
			$('.address .city').text('');
			$('.address .area').text('');
			$.getJSON('2.json',function(data){

				let option='<option value="">--请选择市--</option>';

				$.each(data,function(i){
					if(proId==data[i].proId){
						option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
					}	
				});
				$('#city').html(option);
				
			});
		}else{//如果省份选择了  --请选择-- 这个默认选项,那么城市、区县就做同样的选择,并把实时更新的元素设为空
			$(this).next().find('option[value=""]').attr("selected","selected").parent().next().find('option[value=""]').attr("selected","selected");
			$('.address .pro').text('');
			$('.address .city').text('');
			$('.address .area').text('');
		}
	});
	$('#city').change(function(){
		let cityId = $(this).val();//获取变动的城市ID
		if(cityId!=''){//如果选择了有效的城市
			$('.address .city').replaceWith('<span class="city">'+$(this).find(':selected').text()+"</span>");
			//立即把后面的区县设为空
			$('.address .area').text('');
			$.getJSON('3.json',function(data){

				let option='<option value="">--请选择区县--</option>';

				$.each(data,function(i){
					if(cityId==data[i].cityId){
						option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
					}	
				});
				$('#area').html(option);
				
			});
		}else{
			//没有选择城市 那么地址的城市、区县设为空
			$('.address .city').text('');			
			$('.address .area').text('');
			//并让区县选中默认选项 --请选择--
			$(this).next().find('option[value=""]').attr("selected","selected");
		}
	});
	$('#area').change(function(){//区县发生变化，把地址更新
		let areaId = $(this).val();
		if(areaId!=''){
			$('.address .area').replaceWith('<span class="area">'+$(this).find(':selected').text()+"</span>");
		}else{
			$('.address .area').text('');
		}
	})

批改老师：天蓬老师批改时间：2018-12-02 12:45:56
老师总结：三级联动,用得非常多,也有很多现成的第三方插件, 但是了解底层的实现原理,还是很有必要的