- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- 基于JavaScript實(shí)現省市聯(lián)動(dòng)效果
本文實(shí)例為大家分享了JavaScript實(shí)現省市聯(lián)動(dòng)效果的具體代碼，供大家參考，具體內容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市級聯(lián)動(dòng)效果</title>
</head>
<body onload="initProvince()">
省份：<select id="province" onchange="fillCity()"></select>
城市：<select id="city"></select>
<script>
/**
* 初始化省份函數
*/
function initProvince() {
//聲明存儲省份的數組
let provinceArr=["陜西省","四川省","河南省","山東省"];
//將省份數組動(dòng)態(tài)寫(xiě)入到下拉列表中
//通過(guò)id獲得省份列表對象
let proovinceObj=document.getElementById("province");
//設置未選擇時(shí)，展示的內容
let option=new Option("---請選擇省份---","");
proovinceObj.options.add(option);
//循環(huán)遍歷省份數組
for (let province of provinceArr){
//創(chuàng )建Option對象
//參數一：列表顯示的內容
//參數二：option的values屬性值
let option = new Option(province,province);
//將option對象添加到provinceObj對象中
proovinceObj.options.add(option);
}
}
//創(chuàng )建城市數組
//聲明一個(gè)用于存儲城市的數組
let cityArr=new Array();
cityArr['陜西省']=['西安市','咸陽(yáng)市','寶雞市','漢中市','延安市'];
cityArr['四川省']=['成都市','達州市','廣元市','綿陽(yáng)市','樂(lè )山市'];
cityArr['河南省']=['鄭州市','開(kāi)封市','洛陽(yáng)市','新鄉市','焦作市'];
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]){
//將每個(gè)城市填充到城市列表中
let cityOption = new Option(city,city);
cityObj.options.add(cityOption)
}
}
</script>
</body>
</html>
以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
