基于JavaScript實(shí)現(xiàn)省市聯(lián)動效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)省市聯(lián)動效果的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>省市級聯(lián)動效果</title></head><body onload='initProvince()'>省份：<select onchange='fillCity()'></select>城市：<select id='city'></select><script> /** * 初始化省份函數(shù) */ function initProvince() {//聲明存儲省份的數(shù)組let provinceArr=['陜西省','四川省','河南省','山東省'];//將省份數(shù)組動態(tài)寫入到下拉列表中//通過id獲得省份列表對象let proovinceObj=document.getElementById('province');//設(shè)置未選擇時，展示的內(nèi)容let option=new Option('---請選擇省份---','');proovinceObj.options.add(option);//循環(huán)遍歷省份數(shù)組for (let province of provinceArr){ //創(chuàng)建Option對象 //參數(shù)一：列表顯示的內(nèi)容 //參數(shù)二：option的values屬性值 let option = new Option(province,province); //將option對象添加到provinceObj對象中 proovinceObj.options.add(option);} } //創(chuàng)建城市數(shù)組 //聲明一個用于存儲城市的數(shù)組 let cityArr=new Array(); cityArr[’陜西省’]=[’西安市’,’咸陽市’,’寶雞市’,’漢中市’,’延安市’]; cityArr[’四川省’]=[’成都市’,’達(dá)州市’,’廣元市’,’綿陽市’,’樂山市’]; cityArr[’河南省’]=[’鄭州市’,’開封市’,’洛陽市’,’新鄉(xiāng)市’,’焦作市’]; cityArr[’山東省’]=[’濟(jì)南市’,’青島市’,’萊州市’,’煙臺市’,’德州市’]; /** * 根據(jù)省份填充城市 */ function fillCity() {//獲得當(dāng)前選中的省份let provinceObj = document.getElementById('province');let province=provinceObj.value;//獲得城市列表對象let cityObj = document.getElementById('city');//清空城市列表中的原有數(shù)據(jù)cityObj.options.length=0;//判斷是否選擇了省份if (province!=''){ let cityOption = new Option('---請選擇城市---',''); cityObj.options.add(cityOption);}//根據(jù)該省份獲得對應(yīng)的城市數(shù)組，遍歷城市數(shù)組for (let city of cityArr[province]){ //將每個城市填充到城市列表中 let cityOption = new Option(city,city); cityObj.options.add(cityOption)} }</script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個IP代理模塊2. Ajax返回值類型與用法實(shí)例分析3. .NET6打包部署到Windows Service的全過程4. Vue element ui用戶展示頁面的實(shí)例5. 如何在jsp界面中插入圖片6. HTML 絕對路徑與相對路徑概念詳細(xì)7. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財務(wù)記賬管理系統(tǒng)8. asp批量添加修改刪除操作示例代碼9. 使用FormData進(jìn)行Ajax請求上傳文件的實(shí)例代碼10. css代碼優(yōu)化的12個技巧
網(wǎng)公網(wǎng)安備