基於JavaScript實現省市聯動效果
阿新 • • 發佈：2021-06-23
本文例項為大家分享了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.a程式設計客棧dd(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['河南省']=['鄭州市','開封市'gSXwUlCQeX,'洛陽市','新鄉市','焦作市']; cityArr['山東省']=['濟南市','青島市','萊州市','煙臺市','德州市']; /** * 根據省份填充城市 */ function fillCity() { //獲得當前選中的省份http://www.cppcns.com let provinceObj = document.getElementById("province"); let province=provinceObj.value; //獲得城市列表物件 let cityObj = document.getElementById("city"); //清空城市列表中的原有資料 cityObj.options.length=0; //判斷是否選擇了省份 if (province!=""){ let cityOption = new Option("---請選擇城市---",""); http://www.cppcns.comcityObj.options.add(cityOption); } //根據該省份獲得對應的城市陣列，遍歷城市陣列 for (let city of cityArr[province]){ //將每個城市填充到城市列表中 let cityOption = new Option(city,city); cityObj.options.add(cityOption) } } </script> </body> </html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。