ajax实现三级联动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实现三级联动</title>
	<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
	省: <select id="pro"></select>
	市: <select id="city"></select>
	区/县: <select id="area"></select>


	<script type="text/javascript">
		$(function(){
			$.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() {
				$('[value=""]').remove();
				let option = '<option value="">请选择(市)</option>';
				let proVal = parseInt($(this).val());
				$.getJSON('2.json',function(data) {
					$.each(data,function(i){
						if(data[i].proId == proVal) {
							option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
						}
					})
					$('#city').html(option);
				})
			})

			// 城市改变事件
			$('#city').change(function(){

				$('[value=""]').remove();
				let option = '<option value="">请选择(区/县)</option>';
				let cityVal = parseInt($(this).val());
				console.log(cityVal)
				$.getJSON('3.json',function(data) {
					$.each(data,function(i){
						if(data[i].cityId == cityVal) {
							option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
						}
					})
					$('#area').html(option);
				})
			})
		})
	</script>
</body>
</html>
相关文章
