亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)作業(yè)

Original 2018-12-16 22:09:35 255
abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)</title> </head> <body> ?。?lt;select id="pro"& 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)</title>

</head>
<body>
?。?lt;select id="pro"></select>
市：<select id="city"></select>
區(qū)縣：<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="">請(qǐng)選擇</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":"達(dá)州",
	"proId":1
}

]
[	
	{
		"areaId":1,
		"cityId":1,
		"areaName":"棉江區(qū)"
	},
	{
		"areaId":2,
		"cityId":1,
		"areaName":"新區(qū)"
	},
	{
		"areaId":3,
		"cityId":2,
		"areaName":"新區(qū)"
	},
	{
		"areaId":4,
		"cityId":2,
		"areaName":"新區(qū)"
	},
	{
		"areaId":5,
		"cityId":3,
		"areaName":"大樹"
	},
	{
		"areaId":6,
		"cityId":4,
		"areaName":"昆山區(qū)"
	}
]

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

Correcting teacher：韋小寶Correction time：2018-12-17 09:24:18
Teacher's summary：不錯(cuò)不錯(cuò)！寫的很棒！這種通過接口似的獲取數(shù)據(jù)在日常的開發(fā)中是非常常用的！

Release Notes

Popular Entries