摘要：<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<title>Document</title>
</head>
<body>
?。?lt;select name="provice" id="provice"></select><br />
市：<select name="city" id="city"></select><br />
區(qū)：<select name="sarea" id="sarea"></select><br />
詳細(xì)：<input type="text" name="address"/><br />
<script type="text/javascript">
$(function(){
//自動加載省份列表
$.getJSON('test.json',function(data){
var obj=data['items'];
var option ='<option value="0">請選擇省份</option>';
for (var i=0;i<obj.length;i++) {
option +='<option value="'+obj[i].areaId+'">'+obj[i].province+'</option>';
}
$('#provice').html(option);
});
})
//change事件 選擇省份 change事件不能放在就緒函數(shù)里
$('#provice').on('change',function(){
var provice=$("#provice").val();
if(provice==0){
$("#city").html('');
}else{
$.ajax({
type:"GET",
url:"test.json",
dataType:'json',
data:{provice:'provice'},
success:function(data){
var obj=data['items'];
var option ='<option value="0">請選擇城市</option>';
for (var i=0;i<obj.length;i++) {
if(obj[i].areaId==provice){
for (var j=0;j<obj[i].cityList.length;j++) {
var obj_city=obj[i].cityList;
option +='<option value="'+obj_city[j].areaId+'">'+obj_city[j].city+'</option>';
}
}
}
$('#city').html(option);
}
});
}
})
//change事件 選擇城市 change事件不能放在就緒函數(shù)里
$('#city').on('change',function(){
var provice=$("#provice").val();
var city=$("#city").val();
if(city==0){
$("sarea").html('');
}else{
$.ajax({
type:"GET",
url:"test.json",
dataType:'json',
data:{city:'city'},
success:function(data){
var obj=data['items'];
var option ='<option value="0">請選擇區(qū)</option>';
for (var i=0;i<obj.length;i++) {
var obj_city=obj[i].cityList;
for (var j=0;j<obj_city.length;j++) {
if(city==obj_city[j].areaId){
var areaList=obj_city[j]['areaList'];
console.log(areaList)
for (var m=0;m<areaList.length;m++) {
option +='<option value="'+areaList[m].areaId+'">'+areaList[m].area+'</option>';
}
$('#sarea').html(option);
}else{
$('#sarea').html();
}
}
}
}
});
}
})
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-05 09:54:35
老師總結(jié)：完成的不錯。下次把代碼縮進，整齊些。繼續(xù)加油。