溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關JavaScript實現省份城市三級聯動的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
具體內容如下
效果圖：
<!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>感謝各位的閱讀！關于“JavaScript實現省份城市三級聯動的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
