Ajax实战之省市区三级联动菜单

摘要：project.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax实战之省、市、区三级联动菜单</title> <script type="text/javascript&

project.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax实战之省、市、区三级联动菜单</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
	省:<select name="" id="province"></select>
	市:<select name="" id="city"></select>
	区:<select name="" id="area"></select>
	<p id="attr"></p>
	<script type="text/javascript">
		$(function(){
			$.getJSON('province.json',function(data){
				//console.log(data)
				let option = '<option value="">请选择(省)</option>'
				$.each(data,function(i){
					option+= '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'
				})

				$('#province').html(option)
			})

			$('#province').change(function(){
				console.log($(this).find(':selected').text()) //查看当前选择的省的名称

				$('#attr').html($(this).find(':selected').text())
				$.getJSON('city.json',function(data){
					let option = '<option value="">请选择(市)</option>'
					$.each(data,function(i){
						if(data[i].proId==$('#province').val()){   //下一级省id必须和上一级省id相同
							option+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'
						}
					})					
						$('#city').html(option)
				})
			})

			$('#city').change(function(){
				console.log($(this).find(':selected').text()) //查看当前选择的市的名称
				$.getJSON('area.json',function(data){
					let option = '<option value="">请选择(区)</option>'
					$.each(data,function(i){
						if(data[i].cityId==$('#city').val()){
							option+= '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>'
						}
					})
					$('#area').html(option)
				})
			})

			$('#area').change(function(){
				console.log($(this).find(':selected').text()) //查看当前选择的区的名称
			})
		})


	</script>
</body>
</html>

province.json:
[
		{
			"proId":1,
		 	"proName":"安徽"
		 },

		 {
			 "proId":2,
		 	"proName":"江苏"
		 }

	]
	
city.json:
	[
		{
			"cityId":1,
			"cityName":"合肥",
			"proId":1
		},
		{
			"cityId":2,
			"cityName":"芜湖",
			"proId":1
		},
		{
			"cityId":3,
			"cityName":"南京",
			"proId":2
		},
		{
			"cityId":4,
			"cityName":"苏州",
			"proId":2
		}
	]
	
area.json:
		[
			{
				"areaId":1,
				"areaName":"包河区",
				"cityId":1
			},
			{
				"areaId":2,
				"areaName":"蜀山区",
				"cityId":1
			},
			{
				"areaId":3,
				"areaName":"镜湖区",
				"cityId":2
			},
			{
				"areaId":4,
				"areaName":"弋江区",
				"cityId":2
			},
			{
				"areaId":5,
				"areaName":"玄武区",
				"cityId":3
			},
			{
				"areaId":6,
				"areaName":"六合区",
				"cityId":3
			},
			{
				"areaId":7,
				"areaName":"昆山市",
				"cityId":4
			},
			{
				"areaId":8,
				"areaName":"吴江区",
				"cityId":4
			}
		]

1. $.getJSON()函数专用于解析从服务器上返回的json格式的内容

2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数

3. $.getJSON()需要读取json格式的数据,为简化起见,直接创建一个json文件，实际开发中应该从接口获取

4. $.each() 专用来遍历对象或者数组的全局函数

语法：$.each( object, callback )

批改老师：灭绝师太批改时间：2019-01-08 09:17:46
老师总结：完成的很好！作业代码思路清晰，花了功夫的，继续加油！

Ajax实战之省市区三级联动菜单

热门词条