ajax实现三级联动作业_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax实现三级联动</title> </head> <body> 省：<select id="pro"&

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax实现三级联动</title>

</head>
<body>
省：<select id="pro"></select>
市：<select id="city"></select>
区县：<select id="area"></select>
<p>ggg</p>

</body>
<script  src="../jq/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// /$(选择器).css('属性名','属性值')
// {'属性名1':'属性值1'，'属性名2'：'属性值2'}
$(function (){

$.getJSON('../inc/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(){
console.log($(this).find(':selected').text());//查看已选到
$.getJSON('../inc/2.json', function (data) {
console.log(2,data)
let option = '<option value="">选择市</option>';
$.each(data,function(i){

if(data[i].proId==$('#pro').val()) {
option+='<option value="'+data[i].cityId+'">'+ data[i].cityName+'</option>';
}

})
$('#city').html(option);
})


});
$('#city').change(function(){
console.log($(this).find(':selected').text());//查看已选到
$.getJSON('../inc/3.json', function (data) {
console.log(2,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);
})


});
</script>
</html>

[ {
	"proId":1,
	"proName":"四川"

},
	{
		"proId":2,
		"proName":"广西"
	}

]

[ {
	"cityId":1,
	"cityName":"南宁",
	"proId":2
},
	{
	"cityId":2,
	"cityName":"钦州",
	"proId":2
},
{
	"cityId":3,
	"cityName":"成都",
	"proId":1
},
{
	"cityId":4,
	"cityName":"达州",
	"proId":1
}

]

[	
	{
		"areaId":1,
		"cityId":1,
		"areaName":"棉江区"
	},
	{
		"areaId":2,
		"cityId":1,
		"areaName":"新区"
	},
	{
		"areaId":3,
		"cityId":2,
		"areaName":"新区"
	},
	{
		"areaId":4,
		"cityId":2,
		"areaName":"新区"
	},
	{
		"areaId":5,
		"cityId":3,
		"areaName":"大树"
	},
	{
		"areaId":6,
		"cityId":4,
		"areaName":"昆山区"
	}
]

AE}}%SKKXNF]~N{Z7SCRCD2.png

批改老师：韦小宝批改时间：2018-12-17 09:24:18
老师总结：不错不错！写的很棒！这种通过接口似的获取数据在日常的开发中是非常常用的！

ajax实现三级联动作业

热门词条