JavaScript實現省份城市的三級聯動
阿新 • • 發佈：2020-02-12
本文例項為大家分享了js實現省份城市的三級聯動的具體程式碼，供大家參考，具體內容如下
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select{
width: 80px;
margin: 5px;
}
</style>
<script>
// 省份陣列
var provinceArr = ['上海','江蘇','河北'];
// 城市陣列
var cityArr = [
['上海市'],['蘇州市','南京市','揚州市'],['石家莊','秦皇島','張家口']
];
// 區域陣列
var countryArr = [
[
['黃浦區','靜安區','長寧區','浦東區']
],[
['虎丘區','吳中區','相城區','姑蘇區','吳江區'],['玄武區','秦淮區','建鄴區','鼓樓區','浦口區'],['邗江區','廣陵區','江都區']
],[
['長安區','橋西區','新華區','井陘礦區'],['海港區','山海關區','北戴河區','撫寧區'],['橋東區','宣化區','下花園區']
]
];
window.onload = function(){
var province = document.getElementById('province');
var city = document.getElementById('city');
var country = document.getElementById('country');
createOption(province,provinceArr);
province.onchange = function(){
city.length = 0;
createOption(city,cityArr[this.selectedIndex]);
city.onchange();
}
city.onchange = function(){
country.length = 0;
createOption(country,countryArr[province.selectedIndex][this.selectedIndex]);
}
province.onchange();
}
function createOption(obj,data){
for (var i = 0; i < data.length; i++) {
var newOption = new Option(data[i],data[i]);
obj.add(newOption,null);
}
}
</script>
</head>
<body>
省份<select name="" id="province"></select>
城市<select name="" id="city"></select>
區域<select name="" id="country"></select>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。