本文實例為大家分享了三級聯動省市區js完整代碼，供大家參考，具體內容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var cityList = new Array();
var quList = new Array();
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;
function allData() {
var shengfen = document.getElementById('shengfen');
for ( var sf in cityList) {
shengfen.add(new Option(sf, sf));
}
}
function changeCity() {
var chengshi = document.getElementById('chengshi');
var sheng = document.getElementById('shengfen').value;
chengshi.options.length = 1;
for ( var cs in cityList[sheng]) {
chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));
}
}
function changequ() {
var shiqu = document.getElementById('shiqu');
var cheng = document.getElementById('chengshi').value;
shiqu.options.length = 1;
for ( var sh in quList[cheng]) {
shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));
}
}
</script>
</head>
<body>
<br />
<select id="shengfen" style="width:100px" onchange="changeCity()"><option>--選擇省份--</option>
</select>
<select id="chengshi" style="width:100px" onchange="changequ()"><option>--選擇城市--</option>
</select>
<select id="shiqu" style="width:100px"><option>--選擇區縣--</option>
</select>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。