您好,登錄后才能下訂單哦!
本文實(shí)例講述了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能。分享給大家供大家參考,具體如下:
三級(jí)聯(lián)動(dòng)是我們寫(xiě)表單時(shí)必不可少的,比如在寫(xiě)收貨地址時(shí),就用到他了,最近在看原生JavaScript,從基礎(chǔ)寫(xiě)起,待完善,以后再寫(xiě)個(gè)jquery版的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三級(jí)聯(lián)動(dòng)菜單</title> <style> select { font-family: "蘿莉體 第二版"; } .hide { display: none; } </style> </head> <body> <div> <select id="province"> <option>-請(qǐng)選擇-</option> </select> <select id="city" class="hide"> <option>-請(qǐng)選擇-</option> </select> <select id="area" class="hide"> <option>-請(qǐng)選擇-</option> </select> </div> <script> var provinceList = ['北京市', '河北省', '浙江省']; var cityList = [['東城區(qū)', '西城區(qū)', '海淀區(qū)'], ['廊坊市', '唐山市', '石家莊市', '承德市'], ['杭州市', '溫州市', '寧波市', '嘉興市', '紹興市']]; var areasList = [ [ ['東城區(qū)1', '東城區(qū)2', '東城區(qū)3'], ['西城區(qū)1', '西城區(qū)2', '西城區(qū)3'], ['海淀區(qū)1', '海淀區(qū)2', '海淀區(qū)3'] ], [ ['廊坊市1', '廊坊市2', '廊坊市3', '廊坊市4'], ['唐山市1', '唐山市2', '唐山市3', '唐山市4'], ['石家莊市1', '石家莊市2', '石家莊市3', '石家莊市4'], ['承德市1', '承德市2', '承德市3', '承德市4'] ], [ ['杭州市1', '杭州市2', '杭州市3', '杭州市4', '杭州市5'], ['溫州市1', '溫州市2', '溫州市3', '溫州市4', '溫州市5'], ['寧波市1', '寧波市2', '寧波市3', '寧波市4', '寧波市5'], ['嘉興市1', '嘉興市2', '嘉興市3', '嘉興市4', '嘉興市5'], ['紹興市1', '紹興市2', '紹興市3', '紹興市4', '紹興市5'] ] ]; //1.獲取元素 var province = document.getElementById("province"); var city = document.getElementById("city"); var area = document.getElementById("area"); //2.給省的選擇框賦值, // ----使用自執(zhí)行函數(shù),避免污染全局變量----- (function () { for (var i = 0; i < provinceList.length; i++) { var myOption = document.createElement("option"); myOption.innerHTML = provinceList[i]; //設(shè)置value值 myOption.value = i; province.appendChild(myOption); } })(); //3.設(shè)置選擇省的行為函數(shù) province.onchange = function (e) { city.style.display = "inline-block"; //設(shè)置第二個(gè)出現(xiàn) while (city.children.length > 1) { //當(dāng)省設(shè)置為“請(qǐng)選擇”時(shí),移除子元素 city.removeChild(city.lastElementChild); } while (area.children.length > 1) { //當(dāng)市設(shè)置為“請(qǐng)選擇”時(shí),移除子元素 area.removeChild(area.lastElementChild); } if (cityList[this.value]) {//當(dāng)設(shè)置為請(qǐng)選擇時(shí)不顯示列表 for (var i = 0; i < cityList[this.value].length; i++) { //添加市的列表 var myOption = document.createElement("option"); myOption.innerHTML = cityList[this.value][i]; //設(shè)置value值 myOption.value = i; city.appendChild(myOption); } } }; //4.設(shè)置選擇市的行為函數(shù) city.onchange = function (e) { area.style.display = "inline-block"; //設(shè)置第二個(gè)出現(xiàn) while (area.children.length > 1) { //當(dāng)市設(shè)置為“請(qǐng)選擇”時(shí),移除子元素 area.removeChild(area.lastElementChild); } if (areasList[province.value][this.value]) {//當(dāng)設(shè)置為"請(qǐng)選擇"時(shí)不顯示列表 for (var i = 0; i < areasList[province.value][this.value].length; i++) { //添加市的列表 var myOption = document.createElement("option"); myOption.innerHTML = areasList[province.value][this.value][i]; area.appendChild(myOption); } } } </script> </body> </html>
運(yùn)行效果圖如下:
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。