<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
<title>下拉三級關聯(lián)</title>
<style type="text/css">
body{
font-size:13px
}
.clsInit{
width:435px;
height:35px;
line-height:35px;
}
.clsTip{
padding-top:5px;
background-color:#eee;
display:none
}
.detail{
width: 200px;
height: 150px;
margin-top: 10px;
}
</style>
</head>
<body>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(()=>{
function objInit(obj){
return $(obj).html('<option>請選擇</option>');
}
var arrData={
江蘇省:
{
蘇州市:'吳中區(qū),姑蘇區(qū),虎丘區(qū),相城區(qū),吳江區(qū),工業(yè)園區(qū),常熟市,張家港市,太倉市,昆山市',
無錫市:'崇安區(qū),南長區(qū),北塘區(qū),濱湖區(qū),惠山區(qū),錫山區(qū),江陰市,宜興市',
常州市:'武進區(qū),鐘樓區(qū),天寧區(qū),新北區(qū),金壇區(qū),溧陽市',
鎮(zhèn)江市:'潤州區(qū)',
南京市:'鼓樓區(qū),下關區(qū),建鄴區(qū),浦口區(qū)',
淮安市:'清河區(qū),清浦區(qū),淮陰區(qū),淮安區(qū),盱眙縣,金湖縣,漣水縣,洪澤縣',
},
安徽省:
{
合肥市:'廬陽區(qū),包河區(qū),蜀山區(qū),瑤海區(qū),肥東縣,肥西縣,長豐縣,廬江縣,巢湖市 ',
淮北市:'杜集區(qū),相山區(qū),烈山區(qū)',
黃山市:'屯溪區(qū),休寧區(qū),黃山區(qū)',
池州市:'貴池區(qū),東至縣,石臺縣,青陽縣'
},
貴州省:
{
貴陽市:'南明區(qū),云巖區(qū),烏當區(qū),觀山湖區(qū),白云區(qū),花溪區(qū)',
畢節(jié)市:'大方縣,黔西縣,金沙縣,織金縣,威寧縣'
}
};
$.each(arrData,(pF)=>{
$('#selF').append('<option>'+pF+'</option>');
});
$('#selF').change(()=>{
objInit('#selT');
objInit('#selC');
$.each(arrData,(pF,pS)=>{
if($('#selF option:selected').text()==pF){
$.each(pS,(pT,pC)=>{
$('#selT').append('<option>'+pT+'</option>');
});
$('#selT').change(()=>{
objInit('#selC');
$.each(pS,(pT,pC)=>{
if($('#selT option:selected').text()==pT){
$.each(pC.split(","),function(){
$('#selC').append('<option>'+this+'</option>');
})
}
})
});
}
})
});
});
</script>
<div class="clsInit">
<select id="selF"><option>請選擇</option></select>
<select id="selT"><option>請選擇</option></select>
<select id="selC"><option>請選擇</option></select>
</div>
<textarea class="detail" placeholder="請在此填寫您的詳細地址..."></textarea>
</body>
</html>
預覽圖
1.jpg
