使用JavaScript怎么實(shí)現(xiàn)一個(gè)級(jí)聯(lián)下拉菜單列表

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用JavaScript怎么實(shí)現(xiàn)一個(gè)級(jí)聯(lián)下拉菜單列表，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1. 聲明級(jí)聯(lián)菜單的構(gòu)造函數(shù)

構(gòu)造函數(shù)需要傳入一個(gè)文本框元素和菜單關(guān)聯(lián)數(shù)據(jù)兩個(gè)參數(shù)。

 //elem為文本框，data為菜單關(guān)聯(lián)數(shù)據(jù)
 function CascadeMenu(elem,data){

 }

2. 在構(gòu)造函數(shù)中創(chuàng)建級(jí)聯(lián)菜單相關(guān)元素，并放到頁(yè)面中，具體代碼如下：

function CascadeMenu(elem,data){
  //獲取文本框
  this.eInput = elem;
  //設(shè)置文本框?yàn)橹蛔x
  this.eInput.setAttribute('readonly',true);
  //設(shè)置文本框提示
  this.eInput.placeholder = '請(qǐng)選擇';
  //獲取文本框父元素
  var eInputParent = this.eInput.parentNode;
  //創(chuàng)建級(jí)聯(lián)菜單容器
  this.eCascade = document.createElement('div');
  this.eCascade.className = 'cascade_container';
  //創(chuàng)建菜單下拉列表容器
  this.eCascadeInto = document.createElement('div');
  this.eCascadeInto.className = 'cascade_into';
  //下拉列表容器默認(rèn)隱藏
  this.eCascadeInto.style.display = 'none';
  //將各個(gè)元素放到頁(yè)面中
  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)，默認(rèn)為false，表示隱藏
  this.bShow = false;
 }

3. 在文本框上綁定點(diǎn)擊事件，生成級(jí)聯(lián)下拉菜單

剛才已經(jīng)把需要的元素都放到了頁(yè)面中，現(xiàn)在可以通過(guò)點(diǎn)擊文本框顯示和隱藏級(jí)聯(lián)菜單元素；
在顯示級(jí)聯(lián)菜單元素時(shí)，應(yīng)該要通過(guò)數(shù)據(jù)生成級(jí)聯(lián)下拉菜單。
因?yàn)槊看吸c(diǎn)擊都需要生成，所以可以在構(gòu)造函數(shù)的原型上添加一個(gè)方法。如下所示： 

function CascadeMenu(elem,data){
  /*…*/

  this.eInput.addEventListener('click',()=>{
   //判斷菜單打開狀態(tài)
   if(this.bShow){ 
    //如果已打開，則隱藏菜單
    this.eCascadeInto.style.display = 'none';
    //修改菜單打開狀態(tài)
    this.bShow = false;
   }else{
    //顯示級(jí)聯(lián)菜單元素
    this.eCascadeInto.style.display = 'none';
    //保存已選擇的菜單數(shù)據(jù)
    this.aSelected = this.eInput.value.split('>');
    //生成級(jí)聯(lián)菜單
    this.generateMenu();
   }
  });
 }
 //根據(jù)數(shù)據(jù)生成級(jí)聯(lián)菜單
 CascadeMenu.prototype.generateMenu = function(){
  //在fnCreatHTML調(diào)用實(shí)例對(duì)象需要聲明一個(gè)變量指向this
  var _self = this;
  //因?yàn)椴淮_定子菜單有多少組，所以需要聲明一個(gè)函數(shù)來(lái)遞歸調(diào)用
  //data:傳入數(shù)據(jù)，step:當(dāng)前級(jí)別
  function fnCreatHTML(data,step){
   //用于存儲(chǔ)子菜單數(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){ 
     //判斷是否是當(dāng)前選擇，如果是，加上cur class，并且存儲(chǔ)子菜單數(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{ 
     //如果沒(méi)有子菜單，直接加到菜單列表中
     sHTML += data[i].name == this.aSelected[step]?
                  '<li class="cur" data-po="'+step+'">':
                  '<li data-po="'+step+'">';
    }
    //添加菜單名稱
    sHTML += data[i].name;
    //結(jié)束當(dāng)前菜單
    sHTML += '</li>';
   }
   sHTML += '</ul>';
   //如果已選擇多個(gè)菜單，遞歸調(diào)用函數(shù)，生成子菜單
   if(this.aSelected.length>step+1){
    sHTML += fnCreatHTML(aChildArr,step+1);
   }
   return sHTML;
  }
  this.eCascadeInto.innerHTML = fnCreatHTML(this.aData,0);
 }

4. 菜單上綁定事件，用于選擇菜單

級(jí)聯(lián)菜單有兩種類型，一種是有下級(jí)菜單的，點(diǎn)擊時(shí)顯示下級(jí)菜單；
一種是沒(méi)有下級(jí)菜單的，點(diǎn)擊時(shí)直接選擇菜單并在文本框中按級(jí)別顯示所選擇的菜單。代碼如下所示：

function CascadeMenu(elem,data){
  /*…*/

  //利用事件委托選擇菜單
  this.eCascadeInto.addEventListener('click',(event)=>{
   //獲取菜單
   var eTarget = event.target;
   //獲取選擇的級(jí)別
   var po = +eTarget.dataset.po;
   //刪除當(dāng)前選擇級(jí)后面的數(shù)據(jù)
   this.aSelected.splice(po+1,this.aSelected.length-(po+1));
   //修改當(dāng)前選擇數(shù)據(jù)
   this.aSelected[po] = eTarget.innerHTML;
   //判斷是否有子菜單
   if(eTarget.className.indexOf('child')==-1){ //沒(méi)有子菜單直接選擇
    this.eInput.value = this.aSelected.join('>');
    this.eCascadeInto.style.display = 'none';
    this.bShow = false;
   }else{ //有子菜單顯示下一級(jí)
    //重新生成DOM元素，數(shù)組中增加空字符串用于顯示下一級(jí)
    this.aSelected.push('')
    //重新生成級(jí)聯(lián)菜單
    this.generateMenu();
   }  
  });
 }

5. 在頁(yè)面空白處點(diǎn)擊時(shí)，隱藏菜單

現(xiàn)在只能在文本框上點(diǎn)擊顯示和隱藏菜單。一般來(lái)說(shuō)任何打開的彈框，都希望在彈框以外的位置可以關(guān)閉掉。這樣需要修改一下文本框上的點(diǎn)擊事件函數(shù)：當(dāng)打開菜單時(shí)，要在document元素上綁定點(diǎn)擊事件，用于關(guān)閉菜單；當(dāng)隱藏菜單時(shí)，需要取消document上綁定的點(diǎn)擊事件。如下所示：

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{
    //顯示級(jí)聯(lián)菜單元素
    this.eCascadeInto.style.display = 'none';
    //保存已選擇的菜單數(shù)據(jù)
    this.aSelected = this.eInput.value.split('>');
    //生成級(jí)聯(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. 最后，準(zhǔn)備好數(shù)據(jù)，調(diào)用構(gòu)造函數(shù)，生成級(jí)聯(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":"朝陽(yáng)區(qū)","id":"110105","child":null},{"name":"豐臺(tái)區(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":"長(zhǎng)安區(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":"無(wú)極縣","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":"新樂(lè)市","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":"豐潤(rùn)區(qū)","id":"130208","child":null},{"name":"曹妃甸區(qū)","id":"130209","child":null},{"name":"灤縣","id":"130223","child":null},{"name":"灤南縣","id":"130224","child":null},{"name":"樂(lè)亭縣","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":"叢臺(tái)區(qū)","id":"130403","child":null},{"name":"復(fù)興區(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":"長(zhǎng)沙市","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":"長(zhǎng)沙縣","id":"430121","child":null},{"name":"寧鄉(xiāng)縣","id":"430124","child":null},{"name":"瀏陽(yáng)市","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":"衡陽(yáng)市","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":"衡陽(yáng)縣","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":"耒陽(yáng)市","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":"樂(lè)昌市","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);

上述就是小編為大家分享的使用JavaScript怎么實(shí)現(xiàn)一個(gè)級(jí)聯(lián)下拉菜單列表了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。