本例項開發的級聯下拉選單是根據已有json資料建立的DOM元素。點選文字框後，顯示一級選單。如果選單中包含子選單，選單右側會有指示箭頭。點選選單之後，會再顯示下一級選單，以此類推。當選單下無子選單時，選擇選單後會在文字框中顯示。
開啟後的級聯選單效果如圖所示：
使用例項中封裝好的外掛，只需要有一個input元素，即可通過外掛自動生成級聯下拉選單，html程式碼如下所示：
<div style="margin-top:100px;text-align:center;"> <input type="text" id="input"> </div>
接下來看下具體封裝的js程式碼怎麼實現。
1. 宣告級聯選單的建構函式
建構函式需要傳入一個文字框元素和選單關聯資料兩個引數。
//elem為文字框，data為選單關聯資料 function CascadeMenu(elem,data){ }
2. 在建構函式中建立級聯選單相關元素，並放到頁面中，具體程式碼如下：
function CascadeMenu(elem,data){ //獲取文字框 this.eInput = elem; //設定文字框為只讀 this.eInput.setAttribute('readonly',true); //設定文字框提示 this.eInput.placeholder = '請選擇'; //獲取文字框父元素 var eInputParent = this.eInput.parentNode; //建立級聯選單容器 this.eCascade = document.createElement('div'); this.eCascade.className = 'cascade_container'; //建立選單下拉選單容器 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); //獲取選單資料 this.aData = data; //記錄已選擇的選單資料 this.aSelected = []; //選單開啟狀態，預設為false，表示隱藏 this.bShow = false; }
3. 在文字框上繫結點選事件，生成級聯下拉選單
剛才已經把需要的元素都放到了頁面中，現在可以通過點選文字框顯示和隱藏級聯選單元素；
在顯示級聯選單元素時，應該要通過資料生成級聯下拉選單。
因為每次點選都需要生成，所以可以在建構函式的原型上新增一個方法。如下所示：
function CascadeMenu(elem,data){ /*…*/ this.eInput.addEventListener('click',()=>{ //判斷選單開啟狀態 if(this.bShow){ //如果已開啟，則隱藏選單 this.eCascadeInto.style.display = 'none'; //修改選單開啟狀態 this.bShow = false; }else{ //顯示級聯選單元素 this.eCascadeInto.style.display = 'none'; //儲存已選擇的選單資料 this.aSelected = this.eInput.value.split('>'); //生成級聯選單 this.generateMenu(); } }); } //根據資料生成級聯選單 CascadeMenu.prototype.generateMenu = function(){ //在fnCreatHTML呼叫例項物件需要宣告一個變數指向this var _self = this; //因為不確定子選單有多少組，所以需要宣告一個函式來遞迴呼叫 //data:傳入資料，step:當前級別 function fnCreatHTML(data,step){ //用於儲存子選單資料 var aChildArr = null; //生成選單DOM的字串 var sHTML = '<ul>'; //迴圈資料 for(let i=0;i<data.length;i++){ //判斷如果有子選單，新增child的class，用於顯示選單右側箭頭 if(data[i].child){ //判斷是否是當前選擇，如果是，加上cur class，並且儲存子選單資料 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; //結束當前選單 sHTML += '</li>'; } sHTML += '</ul>'; //如果已選擇多個選單，遞迴呼叫函式，生成子選單 if(this.aSelected.length>step+1){ sHTML += fnCreatHTML(aChildArr,step+1); } return sHTML; } this.eCascadeInto.innerHTML = fnCreatHTML(this.aData,0); }
4. 選單上繫結事件，用於選擇選單
級聯選單有兩種型別，一種是有下級選單的，點選時顯示下級選單；
一種是沒有下級選單的，點選時直接選擇選單並在文字框中按級別顯示所選擇的選單。程式碼如下所示：
function CascadeMenu(elem,data){ /*…*/ //利用事件委託選擇選單 this.eCascadeInto.addEventListener('click',(event)=>{ //獲取選單 var eTarget = event.target; //獲取選擇的級別 var po = +eTarget.dataset.po; //刪除當前選擇級後面的資料 this.aSelected.splice(po+1,this.aSelected.length-(po+1)); //修改當前選擇資料 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元素，陣列中增加空字串用於顯示下一級 this.aSelected.push('') //重新生成級聯選單 this.generateMenu(); } }); }
5. 在頁面空白處點選時，隱藏選單
現在只能在文字框上點選顯示和隱藏選單。一般來說任何開啟的彈框，都希望在彈框以外的位置可以關閉掉。這樣需要修改一下文字框上的點選事件函式：當開啟選單時，要在document元素上繫結點選事件，用於關閉選單；當隱藏選單時，需要取消document上繫結的點選事件。如下所示：
function CascadeMenu(elem,data){ /*…*/ this.eInput.addEventListener('click',()=>{ //判斷選單開啟狀態 if(this.bShow){ //如果已開啟，則隱藏選單 this.eCascadeInto.style.display = 'none'; //修改選單開啟狀態 this.bShow = false; //取消document上的事件 document.onclick = null; }else{ //顯示級聯選單元素 this.eCascadeInto.style.display = 'none'; //儲存已選擇的選單資料 this.aSelected = this.eInput.value.split('>'); //生成級聯選單 this.generateMenu(); document.onclick = () => { //隱藏選單 this.eCascadeInto.style.display = 'none'; //修改選單開啟狀態 this.bShow = false; //取消document上的事件 document.onclick = null; } } }); //阻止冒泡 this.eCascade.addEventListener('click',(event)=>{ event.stopPropagation(); }); /*…*/ }
6. 最後，準備好資料，呼叫建構函式，生成級聯下拉選單，如下所示：
var json = [ { "name":"北京市","id":"110000","child":[ {"name":"市轄區","id":"110100","child":[ {"name":"東城區","id":"110101","child":null},{"name":"西城區","id":"110102","child":null},{"name":"朝陽區","id":"110105","child":null},{"name":"豐臺區","id":"110106","child":null},{"name":"石景山區","id":"110107","child":null},{"name":"海淀區","id":"110108","child":null},{"name":"門頭溝區","id":"110109","child":null},{"name":"房山區","id":"110111","child":null},{"name":"通州區","id":"110112","child":null},{"name":"順義區","id":"110113","child":null},{"name":"昌平區","id":"110114","child":null},{"name":"大興區","id":"110115","child":null},{"name":"懷柔區","id":"110116","child":null},{"name":"平谷區","id":"110117","child":null},{"name":"密雲區","id":"110118","child":null},{"name":"延慶區","id":"110119","child":null}] }, {"name":"北京市","id":"110000","child":null} ] }, { "name":"河北省","id":"130000","child":[ {"name":"石家莊市","id":"130100","child":[ {"name":"市轄區","id":"130101","child":null},{"name":"長安區","id":"130102","child":null},{"name":"橋西區","id":"130104","child":null},{"name":"新華區","id":"130105","child":null},{"name":"井陘礦區","id":"130107","child":null},{"name":"裕華區","id":"130108","child":null},{"name":"藁城區","id":"130109","child":null},{"name":"鹿泉區","id":"130110","child":null},{"name":"欒城區","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":"市轄區","id":"130201","child":null},{"name":"路南區","id":"130202","child":null},{"name":"路北區","id":"130203","child":null},{"name":"古冶區","id":"130204","child":null},{"name":"開平區","id":"130205","child":null},{"name":"豐南區","id":"130207","child":null},{"name":"豐潤區","id":"130208","child":null},{"name":"曹妃甸區","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":"市轄區","id":"130301","child":null},{"name":"海港區","id":"130302","child":null},{"name":"山海關區","id":"130303","child":null},{"name":"北戴河區","id":"130304","child":null},{"name":"撫寧區","id":"130306","child":null},{"name":"青龍滿族自治縣","id":"130321","child":null},{"name":"昌黎縣","id":"130322","child":null},{"name":"盧龍縣","id":"130324","child":null}] }, {"name":"邯鄲市","id":"130400","child":[ {"name":"市轄區","id":"130401","child":null},{"name":"邯山區","id":"130402","child":null},{"name":"叢臺區","id":"130403","child":null},{"name":"復興區","id":"130404","child":null},{"name":"峰峰礦區","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":"肥鄉縣","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":"市轄區","id":"430101","child":null},{"name":"芙蓉區","id":"430102","child":null},{"name":"天心區","id":"430103","child":null},{"name":"嶽麓區","id":"430104","child":null},{"name":"開福區","id":"430105","child":null},{"name":"雨花區","id":"430111","child":null},{"name":"望城區","id":"430112","child":null},{"name":"長沙縣","id":"430121","child":null},{"name":"寧鄉縣","id":"430124","child":null},{"name":"瀏陽市","id":"430181","child":null}] }, {"name":"株洲市","id":"430200","child":[ {"name":"市轄區","id":"430201","child":null},{"name":"荷塘區","id":"430202","child":null},{"name":"蘆淞區","id":"430203","child":null},{"name":"石峰區","id":"430204","child":null},{"name":"天元區","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":"市轄區","id":"430301","child":null},{"name":"雨湖區","id":"430302","child":null},{"name":"嶽塘區","id":"430304","child":null},{"name":"湘潭縣","id":"430321","child":null},{"name":"湘鄉市","id":"430381","child":null},{"name":"韶山市","id":"430382","child":null}] }, {"name":"衡陽市","id":"430400","child":[ {"name":"市轄區","id":"430401","child":null},{"name":"珠暉區","id":"430405","child":null},{"name":"雁峰區","id":"430406","child":null},{"name":"石鼓區","id":"430407","child":null},{"name":"蒸湘區","id":"430408","child":null},{"name":"南嶽區","id":"430412","child":null},{"name":"衡陽縣","id":"430421","child":null},{"name":"衡南縣","id":"430422","child":[ {"name":"三塘鎮",id:"430422",child:null},{"name":"車江鎮",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":"市轄區","id":"440101","child":null},{"name":"荔灣區","id":"440103","child":null},{"name":"越秀區","id":"440104","child":null},{"name":"海珠區","id":"440105","child":null},{"name":"天河區","id":"440106","child":null},{"name":"白雲區","id":"440111","child":null},{"name":"黃埔區","id":"440112","child":null},{"name":"番禺區","id":"440113","child":null},{"name":"花都區","id":"440114","child":null},{"name":"南沙區","id":"440115","child":null},{"name":"從化區","id":"440117","child":null},{"name":"增城區","id":"440118","child":null}] }, {"name":"韶關市","id":"440200","child":[ {"name":"市轄區","id":"440201","child":null},{"name":"武江區","id":"440203","child":null},{"name":"湞江區","id":"440204","child":null},{"name":"曲江區","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":"市轄區","id":"440301","child":null},{"name":"羅湖區","id":"440303","child":null},{"name":"福田區","id":"440304","child":null},{"name":"南山區","id":"440305","child":null},{"name":"寶安區","id":"440306","child":null},{"name":"龍崗區","id":"440307","child":null},{"name":"鹽田區","id":"440308","child":null}] }, {"name":"珠海市","id":"440400","child":[ {"name":"市轄區","id":"440401","child":null},{"name":"香洲區","id":"440402","child":null},{"name":"斗門區","id":"440403","child":null},{"name":"金灣區","id":"440404","child":null}] } ] }, { "name":"南沙群島","id":"900001","child":null } ]; var eText = document.getElementById('input'); new CascadeMenu(eText,json);
一個封裝好的js級聯下拉功能就完成了，可以根據圖片自己編寫css樣式以達到需要的效果。