溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關基于JavaScript如何實現省市聯動效果菜單的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
具體內容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市級聯動效果</title>
</head>
<body onload="initProvince()">
省份：<select id="province" onchange="fillCity()"></select>
城市：<select id="city"></select>
<script>
/**
* 初始化省份函數
*/
function initProvince() {
//聲明存儲省份的數組
let provinceArr=["陜西省","四川省","河南省","山東省"];
//將省份數組動態寫入到下拉列表中
//通過id獲得省份列表對象
let proovinceObj=document.getElementById("province");
//設置未選擇時，展示的內容
let option=new Option("---請選擇省份---","");
proovinceObj.options.add(option);
//循環遍歷省份數組
for (let province of provinceArr){
//創建Option對象
//參數一：列表顯示的內容
//參數二：option的values屬性值
let option = new Option(province,province);
//將option對象添加到provinceObj對象中
proovinceObj.options.add(option);
}
}
//創建城市數組
//聲明一個用于存儲城市的數組
let cityArr=new Array();
cityArr['陜西省']=['西安市','咸陽市','寶雞市','漢中市','延安市'];
cityArr['四川省']=['成都市','達州市','廣元市','綿陽市','樂山市'];
cityArr['河南省']=['鄭州市','開封市','洛陽市','新鄉市','焦作市'];
cityArr['山東省']=['濟南市','青島市','萊州市','煙臺市','德州市'];
/**
* 根據省份填充城市
*/
function fillCity() {
//獲得當前選中的省份
let provinceObj = document.getElementById("province");
let province=provinceObj.value;
//獲得城市列表對象
let cityObj = document.getElementById("city");
//清空城市列表中的原有數據
cityObj.options.length=0;
//判斷是否選擇了省份
if (province!=""){
let cityOption = new Option("---請選擇城市---","");
cityObj.options.add(cityOption);
}
//根據該省份獲得對應的城市數組，遍歷城市數組
for (let city of cityArr[province]){
//將每個城市填充到城市列表中
let cityOption = new Option(city,city);
cityObj.options.add(cityOption)
}
}
</script>
</body>
</html>感謝各位的閱讀！關于“基于JavaScript如何實現省市聯動效果菜單”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
