摘要：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="">--請選擇區(qū)縣--</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);
	});
	//當省份發(fā)生變化時
	$('#pro').change(function(){
		let proId = $(this).val();//獲取當前選擇的省份ID
		if(proId!=''){//如果選擇了有效的省份
			$('.address .pro').replaceWith('<span class="pro">'+$(this).find(':selected').text()+"</span>");//把選擇的省份實時更新到頁面中,這里采用替換，避免重復(fù)顯示
			//當省份發(fā)生改變時，立即把后面的城市、區(qū)縣設(shè)為空
			$('.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{//如果省份選擇了  --請選擇-- 這個默認選項,那么城市、區(qū)縣就做同樣的選擇,并把實時更新的元素設(shè)為空
			$(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>");
			//立即把后面的區(qū)縣設(shè)為空
			$('.address .area').text('');
			$.getJSON('3.json',function(data){

				let option='<option value="">--請選擇區(qū)縣--</option>';

				$.each(data,function(i){
					if(cityId==data[i].cityId){
						option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
					}	
				});
				$('#area').html(option);
				
			});
		}else{
			//沒有選擇城市 那么地址的城市、區(qū)縣設(shè)為空
			$('.address .city').text('');			
			$('.address .area').text('');
			//并讓區(qū)縣選中默認選項 --請選擇--
			$(this).next().find('option[value=""]').attr("selected","selected");
		}
	});
	$('#area').change(function(){//區(qū)縣發(fā)生變化，把地址更新
		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
老師總結(jié)：三級聯(lián)動,用得非常多,也有很多現(xiàn)成的第三方插件, 但是了解底層的實現(xiàn)原理,還是很有必要的