abstract：<!DOCTYPE html><html> <head> &nbs
<!DOCTYPE html>
<html>
<head>
<title>三級(jí)聯(lián)動(dòng)省市區(qū)</title>
<link rel="stylesheet" type="text/css" href="">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.sele{margin:120px auto;width:300px;}
</style>
</head>
<body>
<script>
//創(chuàng)建元素DIV
var div=document.createElement('div');
//div設(shè)置class名
//div.setAttribute('class','sele');
div.className='sele';
//頁(yè)面加入DIV
document.body.appendChild(div);
//創(chuàng)建省select選擇框
var province=document.createElement('select');
//select設(shè)置class名
province.className='province';
//select選擇框加入到div中
var sele=document.getElementsByClassName('sele').item(0);
sele.appendChild(province);
//創(chuàng)建市select選擇框
var city=document.createElement('select');
city.className='city';
var option='<option>請(qǐng)選擇市</option>'
city.innerHTML=option;
sele.appendChild(city);
//創(chuàng)建區(qū)select選擇框
var area=document.createElement('select');
area.className='area';
var option='<option>請(qǐng)選擇區(qū)</option>'
area.innerHTML=option;
sele.appendChild(area);
//聲明在P標(biāo)簽顯示選擇的省市區(qū)的存入到數(shù)組
var address=new Array();
$(function(){
//打開(kāi)頁(yè)面加載選擇的省
$.getJSON('js/province.json',function(res){
var option='<option>請(qǐng)選擇省</option>';
$.each(res,function(i){
option+='<option value='+res[i].pid+'>'+res[i].province+'</option>';
})
//console.log(option);
$('select').eq(0).html(option);
})
//文檔加入P標(biāo)簽，并設(shè)置樣式
$p=$('<p></p>')
$('div').append($p);
var $sprovince=$('<span class="sprovince" style="color:red;margin-top:15px;display:inline-block;"></span>');
var $scity=$('<span class="scity" style="color:red"></span>');
var $sarea=$('<span class="sarea" style="color:red"></span>');
$('p').append($sprovince);
$('p').append($scity);
$('p').append($sarea);
//選擇省的change事件
$('.province').change(function(){
//已選擇的省id
var pid=$(this).find('option:selected').val();
//已選擇的省名
var province=$(this).find('option:selected').text();
console.log(pid);
console.log(province);
//加載選擇省相對(duì)應(yīng)的市
$.getJSON('js/city.json',function(res){
var optionCity='<option value=0>請(qǐng)選擇市</option>';
$.each(res,function(i){
//通過(guò)ID對(duì)應(yīng)關(guān)系判斷
if(res[i].pid&&pid==res[i].pid){
optionCity+='<option value='+res[i].cityId+'>'+res[i].cityName+'</option>';
}
})
$('.city').html(optionCity);
})
//省P標(biāo)簽寫(xiě)入值
$('.sprovince').text(province);
//把省的值寫(xiě)入到數(shù)組address中
address[0]=province;
})
//選擇市的change事件
$('.city').change(function(){
//已選擇的市id
var cityId=$(this).find('option:selected').val();
//已選擇的市名
var cityName=$(this).find('option:selected').text();
console.log(cityId);
//加載選擇市相對(duì)應(yīng)的區(qū)
$.getJSON('js/area.json',function(res){
var optionArea='<option value=0>請(qǐng)選擇區(qū)</option>';
$.each(res,function(i){
//通過(guò)ID對(duì)應(yīng)關(guān)系判斷
if(cityId==res[i].cityId){
optionArea+='<option value='+res[i].areaId+'>'+res[i].areaName+'</option>';
}
})
$('.area').html(optionArea);
})
//市P標(biāo)簽寫(xiě)入值
$('.scity').text(cityName);
//把市的值寫(xiě)入到數(shù)組address中
address[1]=cityName;
})
//選擇區(qū)的change事件
$('.area').change(function(){
//已選擇的區(qū)名
var areaName=$(this).find('option:selected').text();
//阿悄P標(biāo)簽寫(xiě)入值
$('.sarea').text(areaName);
//把區(qū)的值寫(xiě)入到數(shù)組address中
address[2]=areaName;
console.log(address.toString());
})
})
</script>
</body>
</html>
//province.json
[
{
"pid":1,
"province":"湖北省"
},
{
"pid":2,
"province":"湖南省"
}
]
//city.json
[
{
"cityId":1,
"cityName":"武漢市",
"pid":1
},
{
"cityId":2,
"cityName":"荊州市",
"pid":1
},
{
"cityId":3,
"cityName":"潛江市",
"pid":1
},
{
"cityId":4,
"cityName":"長(zhǎng)沙市",
"pid":2
},
{
"cityId":5,
"cityName":"益陽(yáng)市",
"pid":2
},
{
"cityId":6,
"cityName":"岳陽(yáng)市",
"pid":2
}
]
//area.json
[
{
"areaId":1,
"areaName":"漢陽(yáng)區(qū)",
"cityId":1
},
{
"areaId":2,
"areaName":"武昌區(qū)",
"cityId":1
},
{
"areaId":3,
"areaName":"荊州區(qū)",
"cityId":2
},
{
"areaId":4,
"areaName":"沙市區(qū)",
"cityId":2
},
{
"areaId":5,
"areaName":"浩口區(qū)",
"cityId":3
},
{
"areaId":6,
"areaName":"新臺(tái)區(qū)",
"cityId":3
},
{
"areaId":7,
"areaName":"芙蓉區(qū)",
"cityId":4
},
{
"areaId":8,
"areaName":"望城區(qū)",
"cityId":4
},
{
"areaId":9,
"areaName":"高橋區(qū)",
"cityId":5
},
{
"areaId":10,
"areaName":"桃江區(qū)",
"cityId":5
},
{
"areaId":11,
"areaName":"天心區(qū)",
"cityId":6
},
{
Correcting teacher：天蓬老師Correction time：2019-08-16 09:47:25
Teacher's summary：這樣的三級(jí)聯(lián)動(dòng)非常有用, 也很常用 , 目前有非常多的第三方插件可以使用, 也有一些公開(kāi)的地址接口可以調(diào)用,非常方便