js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟
更新時間：2021年02月08日 08:43:02 作者：蔣偉平
這篇文章主要介紹了js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
本實例開發(fā)的級聯(lián)下拉菜單是根據(jù)已有json數(shù)據(jù)創(chuàng)建的DOM元素。點擊文本框后，顯示一級菜單。如果菜單中包含子菜單，菜單右側(cè)會有指示箭頭。點擊菜單之后，會再顯示下一級菜單，以此類推。當菜單下無子菜單時，選擇菜單后會在文本框中顯示。
打開后的級聯(lián)菜單效果如圖所示：
使用實例中封裝好的插件，只需要有一個input元素，即可通過插件自動生成級聯(lián)下拉菜單，html代碼如下所示：
<div style="margin-top:100px;text-align:center;"> <input type="text" id="input"> </div>
接下來看下具體封裝的js代碼怎么實現(xiàn)。
1. 聲明級聯(lián)菜單的構(gòu)造函數(shù)
構(gòu)造函數(shù)需要傳入一個文本框元素和菜單關(guān)聯(lián)數(shù)據(jù)兩個參數(shù)。
//elem為文本框，data為菜單關(guān)聯(lián)數(shù)據(jù)
function CascadeMenu(elem,data){
}
2. 在構(gòu)造函數(shù)中創(chuàng)建級聯(lián)菜單相關(guān)元素，并放到頁面中，具體代碼如下：
function CascadeMenu(elem,data){
//獲取文本框
this.eInput = elem;
//設置文本框為只讀
this.eInput.setAttribute('readonly',true);
//設置文本框提示
this.eInput.placeholder = '請選擇';
//獲取文本框父元素
var eInputParent = this.eInput.parentNode;
//創(chuàng)建級聯(lián)菜單容器
this.eCascade = document.createElement('div');
this.eCascade.className = 'cascade_container';
//創(chuàng)建菜單下拉列表容器
this.eCascadeInto = document.createElement('div');
this.eCascadeInto.className = 'cascade_into';
//下拉列表容器默認隱藏
this.eCascadeInto.style.display = 'none';
//將各個元素放到頁面中
this.eCascade.appendChild(this.eInput);
this.eCascade.appendChild(this.eCascadeInto);
eInputParent.appendChild(this.eCascade);
//獲取菜單數(shù)據(jù)
this.aData = data;
//記錄已選擇的菜單數(shù)據(jù)
this.aSelected = [];
//菜單打開狀態(tài)，默認為false，表示隱藏
this.bShow = false;
}
3. 在文本框上綁定點擊事件，生成級聯(lián)下拉菜單
剛才已經(jīng)把需要的元素都放到了頁面中，現(xiàn)在可以通過點擊文本框顯示和隱藏級聯(lián)菜單元素；
在顯示級聯(lián)菜單元素時，應該要通過數(shù)據(jù)生成級聯(lián)下拉菜單。
因為每次點擊都需要生成，所以可以在構(gòu)造函數(shù)的原型上添加一個方法。如下所示：
function CascadeMenu(elem,data){
/*…*/
this.eInput.addEventListener('click',()=>{
//判斷菜單打開狀態(tài)
if(this.bShow){
//如果已打開，則隱藏菜單
this.eCascadeInto.style.display = 'none';
//修改菜單打開狀態(tài)
this.bShow = false;
}else{
//顯示級聯(lián)菜單元素
this.eCascadeInto.style.display = 'none';
//保存已選擇的菜單數(shù)據(jù)
this.aSelected = this.eInput.value.split('>');
//生成級聯(lián)菜單
this.generateMenu();
}
});
}
//根據(jù)數(shù)據(jù)生成級聯(lián)菜單
CascadeMenu.prototype.generateMenu = function(){
//在fnCreatHTML調(diào)用實例對象需要聲明一個變量指向this
var _self = this;
//因為不確定子菜單有多少組，所以需要聲明一個函數(shù)來遞歸調(diào)用
//data:傳入數(shù)據(jù)，step:當前級別
function fnCreatHTML(data,step){
//用于存儲子菜單數(shù)據(jù)
var aChildArr = null;
//生成菜單DOM的字符串
var sHTML = '<ul>';
//循環(huán)數(shù)據(jù)
for(let i=0;i<data.length;i++){
//判斷如果有子菜單，添加child的class，用于顯示菜單右側(cè)箭頭
if(data[i].child){
//判斷是否是當前選擇，如果是，加上cur class，并且存儲子菜單數(shù)據(jù)
if(data[i].name==this.aSelected[step]){
aChildArr = data[i].child;
sHTML += '<li class="child cur" data-po="'+step+'">';
}else{
sHTML += '<li class="child" data-po="'+step+'">';
}
}else{
//如果沒有子菜單，直接加到菜單列表中
sHTML += data[i].name == this.aSelected[step]?
'<li class="cur" data-po="'+step+'">':
'<li data-po="'+step+'">';
}
//添加菜單名稱
sHTML += data[i].name;
//結(jié)束當前菜單
sHTML += '</li>';
}
sHTML += '</ul>';
//如果已選擇多個菜單，遞歸調(diào)用函數(shù)，生成子菜單
if(this.aSelected.length>step+1){
sHTML += fnCreatHTML(aChildArr,step+1);
}
return sHTML;
}
this.eCascadeInto.innerHTML = fnCreatHTML(this.aData,0);
}
4. 菜單上綁定事件，用于選擇菜單
級聯(lián)菜單有兩種類型，一種是有下級菜單的，點擊時顯示下級菜單；
一種是沒有下級菜單的，點擊時直接選擇菜單并在文本框中按級別顯示所選擇的菜單。代碼如下所示：
function CascadeMenu(elem,data){
/*…*/
//利用事件委托選擇菜單
this.eCascadeInto.addEventListener('click',(event)=>{
//獲取菜單
var eTarget = event.target;
//獲取選擇的級別
var po = +eTarget.dataset.po;
//刪除當前選擇級后面的數(shù)據(jù)
this.aSelected.splice(po+1,this.aSelected.length-(po+1));
//修改當前選擇數(shù)據(jù)
this.aSelected[po] = eTarget.innerHTML;
//判斷是否有子菜單
if(eTarget.className.indexOf('child')==-1){ //沒有子菜單直接選擇
this.eInput.value = this.aSelected.join('>');
this.eCascadeInto.style.display = 'none';
this.bShow = false;
}else{ //有子菜單顯示下一級
//重新生成DOM元素，數(shù)組中增加空字符串用于顯示下一級
this.aSelected.push('')
//重新生成級聯(lián)菜單
this.generateMenu();
}
});
}
5. 在頁面空白處點擊時，隱藏菜單
現(xiàn)在只能在文本框上點擊顯示和隱藏菜單。一般來說任何打開的彈框，都希望在彈框以外的位置可以關(guān)閉掉。這樣需要修改一下文本框上的點擊事件函數(shù)：當打開菜單時，要在document元素上綁定點擊事件，用于關(guān)閉菜單；當隱藏菜單時，需要取消document上綁定的點擊事件。如下所示：
function CascadeMenu(elem,data){
/*…*/
this.eInput.addEventListener('click',()=>{
//判斷菜單打開狀態(tài)
if(this.bShow){
//如果已打開，則隱藏菜單
this.eCascadeInto.style.display = 'none';
//修改菜單打開狀態(tài)
this.bShow = false;
//取消document上的事件
document.onclick = null;
}else{
//顯示級聯(lián)菜單元素
this.eCascadeInto.style.display = 'none';
//保存已選擇的菜單數(shù)據(jù)
this.aSelected = this.eInput.value.split('>');
//生成級聯(lián)菜單
this.generateMenu();
document.onclick = () => {
//隱藏菜單
this.eCascadeInto.style.display = 'none';
//修改菜單打開狀態(tài)
this.bShow = false;
//取消document上的事件
document.onclick = null;
}
}
});
//阻止冒泡
this.eCascade.addEventListener('click',(event)=>{
event.stopPropagation();
});
/*…*/
}
6. 最后，準備好數(shù)據(jù)，調(diào)用構(gòu)造函數(shù)，生成級聯(lián)下拉菜單，如下所示：
var json = [
{
"name":"北京市","id":"110000","child":[
{"name":"市轄區(qū)","id":"110100","child":[
{"name":"東城區(qū)","id":"110101","child":null},{"name":"西城區(qū)","id":"110102","child":null},{"name":"朝陽區(qū)","id":"110105","child":null},{"name":"豐臺區(qū)","id":"110106","child":null},{"name":"石景山區(qū)","id":"110107","child":null},{"name":"海淀區(qū)","id":"110108","child":null},{"name":"門頭溝區(qū)","id":"110109","child":null},{"name":"房山區(qū)","id":"110111","child":null},{"name":"通州區(qū)","id":"110112","child":null},{"name":"順義區(qū)","id":"110113","child":null},{"name":"昌平區(qū)","id":"110114","child":null},{"name":"大興區(qū)","id":"110115","child":null},{"name":"懷柔區(qū)","id":"110116","child":null},{"name":"平谷區(qū)","id":"110117","child":null},{"name":"密云區(qū)","id":"110118","child":null},{"name":"延慶區(qū)","id":"110119","child":null}]
},
{"name":"北京市","id":"110000","child":null}
]
},
{
"name":"河北省","id":"130000","child":[
{"name":"石家莊市","id":"130100","child":[
{"name":"市轄區(qū)","id":"130101","child":null},{"name":"長安區(qū)","id":"130102","child":null},{"name":"橋西區(qū)","id":"130104","child":null},{"name":"新華區(qū)","id":"130105","child":null},{"name":"井陘礦區(qū)","id":"130107","child":null},{"name":"裕華區(qū)","id":"130108","child":null},{"name":"藁城區(qū)","id":"130109","child":null},{"name":"鹿泉區(qū)","id":"130110","child":null},{"name":"欒城區(qū)","id":"130111","child":null},{"name":"井陘縣","id":"130121","child":null},{"name":"正定縣","id":"130123","child":null},{"name":"行唐縣","id":"130125","child":null},{"name":"靈壽縣","id":"130126","child":null},{"name":"高邑縣","id":"130127","child":null},{"name":"深澤縣","id":"130128","child":null},{"name":"贊皇縣","id":"130129","child":null},{"name":"無極縣","id":"130130","child":null},{"name":"平山縣","id":"130131","child":null},{"name":"元氏縣","id":"130132","child":null},{"name":"趙縣","id":"130133","child":null},{"name":"晉州市","id":"130183","child":null},{"name":"新樂市","id":"130184","child":null}]
},
{"name":"唐山市","id":"130200","child":[
{"name":"市轄區(qū)","id":"130201","child":null},{"name":"路南區(qū)","id":"130202","child":null},{"name":"路北區(qū)","id":"130203","child":null},{"name":"古冶區(qū)","id":"130204","child":null},{"name":"開平區(qū)","id":"130205","child":null},{"name":"豐南區(qū)","id":"130207","child":null},{"name":"豐潤區(qū)","id":"130208","child":null},{"name":"曹妃甸區(qū)","id":"130209","child":null},{"name":"灤縣","id":"130223","child":null},{"name":"灤南縣","id":"130224","child":null},{"name":"樂亭縣","id":"130225","child":null},{"name":"遷西縣","id":"130227","child":null},{"name":"玉田縣","id":"130229","child":null},{"name":"遵化市","id":"130281","child":null},{"name":"遷安市","id":"130283","child":null}]
},
{"name":"秦皇島市","id":"130300","child":[
{"name":"市轄區(qū)","id":"130301","child":null},{"name":"海港區(qū)","id":"130302","child":null},{"name":"山海關(guān)區(qū)","id":"130303","child":null},{"name":"北戴河區(qū)","id":"130304","child":null},{"name":"撫寧區(qū)","id":"130306","child":null},{"name":"青龍滿族自治縣","id":"130321","child":null},{"name":"昌黎縣","id":"130322","child":null},{"name":"盧龍縣","id":"130324","child":null}]
},
{"name":"邯鄲市","id":"130400","child":[
{"name":"市轄區(qū)","id":"130401","child":null},{"name":"邯山區(qū)","id":"130402","child":null},{"name":"叢臺區(qū)","id":"130403","child":null},{"name":"復興區(qū)","id":"130404","child":null},{"name":"峰峰礦區(qū)","id":"130406","child":null},{"name":"邯鄲縣","id":"130421","child":null},{"name":"臨漳縣","id":"130423","child":null},{"name":"成安縣","id":"130424","child":null},{"name":"大名縣","id":"130425","child":null},{"name":"涉縣","id":"130426","child":null},{"name":"磁縣","id":"130427","child":null},{"name":"肥鄉(xiāng)縣","id":"130428","child":null},{"name":"永年縣","id":"130429","child":null},{"name":"邱縣","id":"130430","child":null},{"name":"雞澤縣","id":"130431","child":null},{"name":"廣平縣","id":"130432","child":null},{"name":"館陶縣","id":"130433","child":null},{"name":"魏縣","id":"130434","child":null},{"name":"曲周縣","id":"130435","child":null},{"name":"武安市","id":"130481","child":null}]
}
]
},
{
"name":"湖南省","id":"430000","child":[
{"name":"長沙市","id":"430100","child":[
{"name":"市轄區(qū)","id":"430101","child":null},{"name":"芙蓉區(qū)","id":"430102","child":null},{"name":"天心區(qū)","id":"430103","child":null},{"name":"岳麓區(qū)","id":"430104","child":null},{"name":"開福區(qū)","id":"430105","child":null},{"name":"雨花區(qū)","id":"430111","child":null},{"name":"望城區(qū)","id":"430112","child":null},{"name":"長沙縣","id":"430121","child":null},{"name":"寧鄉(xiāng)縣","id":"430124","child":null},{"name":"瀏陽市","id":"430181","child":null}]
},
{"name":"株洲市","id":"430200","child":[
{"name":"市轄區(qū)","id":"430201","child":null},{"name":"荷塘區(qū)","id":"430202","child":null},{"name":"蘆淞區(qū)","id":"430203","child":null},{"name":"石峰區(qū)","id":"430204","child":null},{"name":"天元區(qū)","id":"430211","child":null},{"name":"株洲縣","id":"430221","child":null},{"name":"攸縣","id":"430223","child":null},{"name":"茶陵縣","id":"430224","child":null},{"name":"炎陵縣","id":"430225","child":null},{"name":"醴陵市","id":"430281","child":null}]
},
{"name":"湘潭市","id":"430300","child":[
{"name":"市轄區(qū)","id":"430301","child":null},{"name":"雨湖區(qū)","id":"430302","child":null},{"name":"岳塘區(qū)","id":"430304","child":null},{"name":"湘潭縣","id":"430321","child":null},{"name":"湘鄉(xiāng)市","id":"430381","child":null},{"name":"韶山市","id":"430382","child":null}]
},
{"name":"衡陽市","id":"430400","child":[
{"name":"市轄區(qū)","id":"430401","child":null},{"name":"珠暉區(qū)","id":"430405","child":null},{"name":"雁峰區(qū)","id":"430406","child":null},{"name":"石鼓區(qū)","id":"430407","child":null},{"name":"蒸湘區(qū)","id":"430408","child":null},{"name":"南岳區(qū)","id":"430412","child":null},{"name":"衡陽縣","id":"430421","child":null},{"name":"衡南縣","id":"430422","child":[
{"name":"三塘鎮(zhèn)",id:"430422",child:null},{"name":"車江鎮(zhèn)",id:"430422",child:null}
]},{"name":"衡山縣","id":"430423","child":null},{"name":"衡東縣","id":"430424","child":null},{"name":"祁東縣","id":"430426","child":null},{"name":"耒陽市","id":"430481","child":null},{"name":"常寧市","id":"430482","child":null}]
}
]
},
{
"name":"廣東省","id":"440000","child":[
{"name":"廣州市","id":"440100","child":[
{"name":"市轄區(qū)","id":"440101","child":null},{"name":"荔灣區(qū)","id":"440103","child":null},{"name":"越秀區(qū)","id":"440104","child":null},{"name":"海珠區(qū)","id":"440105","child":null},{"name":"天河區(qū)","id":"440106","child":null},{"name":"白云區(qū)","id":"440111","child":null},{"name":"黃埔區(qū)","id":"440112","child":null},{"name":"番禺區(qū)","id":"440113","child":null},{"name":"花都區(qū)","id":"440114","child":null},{"name":"南沙區(qū)","id":"440115","child":null},{"name":"從化區(qū)","id":"440117","child":null},{"name":"增城區(qū)","id":"440118","child":null}]
},
{"name":"韶關(guān)市","id":"440200","child":[
{"name":"市轄區(qū)","id":"440201","child":null},{"name":"武江區(qū)","id":"440203","child":null},{"name":"湞江區(qū)","id":"440204","child":null},{"name":"曲江區(qū)","id":"440205","child":null},{"name":"始興縣","id":"440222","child":null},{"name":"仁化縣","id":"440224","child":null},{"name":"翁源縣","id":"440229","child":null},{"name":"乳源瑤族自治縣","id":"440232","child":null},{"name":"新豐縣","id":"440233","child":null},{"name":"樂昌市","id":"440281","child":null},{"name":"南雄市","id":"440282","child":null}]
},
{"name":"深圳市","id":"440300","child":[
{"name":"市轄區(qū)","id":"440301","child":null},{"name":"羅湖區(qū)","id":"440303","child":null},{"name":"福田區(qū)","id":"440304","child":null},{"name":"南山區(qū)","id":"440305","child":null},{"name":"寶安區(qū)","id":"440306","child":null},{"name":"龍崗區(qū)","id":"440307","child":null},{"name":"鹽田區(qū)","id":"440308","child":null}]
},
{"name":"珠海市","id":"440400","child":[
{"name":"市轄區(qū)","id":"440401","child":null},{"name":"香洲區(qū)","id":"440402","child":null},{"name":"斗門區(qū)","id":"440403","child":null},{"name":"金灣區(qū)","id":"440404","child":null}]
}
]
},
{
"name":"南沙群島","id":"900001","child":null
}
];
var eText = document.getElementById('input');
new CascadeMenu(eText,json);
一個封裝好的js級聯(lián)下拉功能就完成了，可以根據(jù)圖片自己編寫css樣式以達到需要的效果。
以上就是js面向?qū)ο蠓庋b級聯(lián)下拉菜單列表的實現(xiàn)步驟的詳細內(nèi)容，更多關(guān)于js 封裝下拉菜單的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了基于JavaScript寫一款EJS模板引擎，基本語法就是定義render函數(shù)，接收html字符串，和data參數(shù)，下面其他具體介紹，需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了使用微信SDK自定義分享的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
一個父容器也是window的window下的comboBox在頁面中點擊無效，但是在控制臺中查看它的store卻是有值的，問題在于沒有顯示。下面小編給大家分享Extjs下拉框不顯示的問題，需要的的朋友參考下吧2017-06-06
本文主要介紹了提高數(shù)據(jù)訪問速度的方法，具有很好的參考作用，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了詳解webpack 如何集成第三方js庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù)示例
這篇文章主要介紹了JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù),結(jié)合實例形式分析了javascript冒泡排序的實現(xiàn)技巧及針對交換次數(shù)的統(tǒng)計方法,便于更直觀的了解冒泡排序算法,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript日期類型的一些用法介紹,本文講解了獲取某個月份的天數(shù)、獲取時區(qū)、計算運行時間、刪除cookie等用法,需要的朋友可以參考下2015-03-03
面試題是招聘公司和開發(fā)者都非常關(guān)心的話題，公司希望通過它了解開發(fā)者的真實水平和細節(jié)處理能力，而開發(fā)者希望能夠最大程度地展示自己的水平（甚至超常發(fā)揮）。本文提供了眾多前端開發(fā)面試題，無論是招聘方還是應聘方都值得一看2016-02-02
這篇文章主要介紹了js多個物體運動功能,結(jié)合實例形式分析了js實現(xiàn)多物體運動功能的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
javascript實現(xiàn)禁止復制網(wǎng)頁內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實現(xiàn)禁止復制頁面內(nèi)容的方法，非常的實用，有需要的小伙伴可以參考下。2015-12-12