ajax的三级联动信息

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>08省市区三级联动</title> <script src="jquery-3.3.1.min.js" ty

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08省市区三级联动</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
省: <select id="paro">
	<option value="">请选择</option>
</select>
市 : <select id="city">
	<option value="">请选择</option>
</select>
区 : <select id="area">
	<option value="">请选择</option>
</select>
<div id="text">
	
</div>
<script type="text/javascript">
	
	$.getJSON('1.json',function(data){
		var str = "<option value=''>请选择</option>"
		//遍历
		$.each(data,function(index,value){
			str += "<option value='"+data[index].paroid+"'>"+data[index].name+"</option>";
		})
		$('#paro').html(str);
	})
	
	
	$('#paro').change(function(event){
		//市
		$.getJSON('2.json',function(data){
			var str = "<option value=''>请选择</option>"
			//遍历
			 $.each(data,function(index,value){
				 //省相等
				 if($(event.target).val() == data[index].paroid){
					str += "<option value='"+data[index].cityid+"'>"+data[index].cityname+"</option>";
				 }
			});
			
			$('#city').html(str);
		})
		$('#paro').find('[value=""]').remove();
		
	});
	
	
	$('#city').change(function(event){
		//区
		$.getJSON('3.json',function(data){
			var str = "<option value=''>请选择</option>"
			//遍历
			 $.each(data,function(index,value){
				 //省相等
				 if($(event.target).val() == data[index].cityId){
					str += "<option value='"+data[index].areaId+"'>"+data[index].areaName+"</option>";
				 }
			});
			$('#area').html(str);
		});
		$('#area').find('[value=""]').remove();
	})
	
	$('#area').change(function(){
		$('#text').text(getUser())
	})
	
	/**
	 * 返回用户选择的信息
	 */
	function getUser(){
		return '你当前选择的地址是: '+$('#paro').find(':selected').text()+"省"+$('#city').find(':selected').text()+$('#area').find(':selected').text();
	}
	
	
</script>
	</body>
</html>

Correcting teacher：韦小宝Correction time：2019-02-01 16:41:58
Teacher's summary：写的很不错 ajax完成三级联动在很多的网站中都是很常见的，这个一定要好好掌握了！继续加油吧！！

ajax的三级联动信息

Popular Entries