<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
<title>下拉三级关联</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={
江苏省:
{
苏州市:'吴中区,姑苏区,虎丘区,相城区,吴江区,工业园区,常熟市,张家港市,太仓市,昆山市',
无锡市:'崇安区,南长区,北塘区,滨湖区,惠山区,锡山区,江阴市,宜兴市',
常州市:'武进区,钟楼区,天宁区,新北区,金坛区,溧阳市',
镇江市:'润州区',
南京市:'鼓楼区,下关区,建邺区,浦口区',
淮安市:'清河区,清浦区,淮阴区,淮安区,盱眙县,金湖县,涟水县,洪泽县',
},
安徽省:
{
合肥市:'庐阳区,包河区,蜀山区,瑶海区,肥东县,肥西县,长丰县,庐江县,巢湖市 ',
淮北市:'杜集区,相山区,烈山区',
黄山市:'屯溪区,休宁区,黄山区',
池州市:'贵池区,东至县,石台县,青阳县'
},
贵州省:
{
贵阳市:'南明区,云岩区,乌当区,观山湖区,白云区,花溪区',
毕节市:'大方县,黔西县,金沙县,织金县,威宁县'
}
};
$.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
