JavaScript省市区三级联动菜单效果
本文实例为大家分享了三级联动省市区js完整代码，供大家参考，具体内容如下
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript">
varcityList=newArray();
varquList=newArray();
cityList['北京']=['北京'];
cityList['浙江']=['杭州市','温州市','金华市','临安市'];
cityList['陕西']=['西安','宝鸡','咸阳'];
cityList['甘肃']=['兰州市','武威市','酒泉市','张掖市'];
quList['北京']=['1区','2区','3区','4区'];
quList['杭州市']=['5区','6区','7区','8区'];
quList['温州市']=['9区','10区','11区','12区'];
quList['西安']=['13区','14区','15区','16区'];
quList['宝鸡']=['17区','18区','19区','20区'];
quList['兰州市']=['21区','22区','23区','24区'];
window.onload=allData;
functionallData(){
varshengfen=document.getElementById('shengfen');
for(varsfincityList){
shengfen.add(newOption(sf,sf));
}
}
functionchangeCity(){
varchengshi=document.getElementById('chengshi');
varsheng=document.getElementById('shengfen').value;
chengshi.options.length=1;
for(varcsincityList[sheng]){
chengshi.add(newOption(cityList[sheng][cs],cityList[sheng][cs]));
}
}
functionchangequ(){
varshiqu=document.getElementById('shiqu');
varcheng=document.getElementById('chengshi').value;
shiqu.options.length=1;
for(varshinquList[cheng]){
shiqu.add(newOption(quList[cheng][sh],quList[cheng][sh]));
}
}
</script>
</head>
<body>
<br/>
<selectid="shengfen"style="width:100px"onchange="changeCity()"><option>--选择省份--</option>
</select>
<selectid="chengshi"style="width:100px"onchange="changequ()"><option>--选择城市--</option>
</select>
<selectid="shiqu"style="width:100px"><option>--选择区县--</option>
</select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。