JS實現多級下拉列表框

.disabled-div 

#hm-select-div input 
#hm-select-div input:focus 
#hm-select-div
.content-div 
.content-div ul 
.content-div ul li
.content-div ul li:hover
.choose-li

// 設定資料來源

let data = [,,,,,];
window.onload = function() 
// 下拉列表
window.addeventlistener('li-hover-event', function(event) 
createnewdiv(data, event.detail.element);
});

let floor = 1;

/** * 刪除多餘的層級
* @param element li元素
*/function clearredundantli(element) 
}}/**
* 建立多級select
* @param data
* @param element li元素
*/function createnewdiv(data, element) 
/** * 為input設定內容
* @param element 當前點選觸發的li元素
*/function setvalue(element) 
});window.dispatchevent(setvalueevent);
}/**
* 隱藏主圖層
*/function hidecontainer() 
}}/**
* 初始化第一層
*/function mainfloorinit(data) else 
}}/**
* 建立乙個新的select
* @param parentnode 父節點
* @param data 資料列表
* @returns 
*/function createselectdiv(parentnode, data) 
// 新建一層
let divele = document.createelement('div');
divele.setattribute('class','content-div');
// 新建ul
let ulele = document.createelement('ul');
// 迴圈新建li
for(let item of data);
liele.onmouseenter = function() 
});// 觸發事件，建立新顯示層
window.dispatchevent(lihoverevent);
};liele.onmouseout = function(event) };}
divele.onmouseenter = function(event) 
return divele;
}function clearliclass(element) 
}

下拉列表框指令碼

目錄 一 概述 二 select標籤 三 option標籤 四 新增移除選項 下拉列表框是通過select和option標籤建立的，為了方便與這個控制項互動，除了所有表單字段共有的屬性和方法外，js還提供了一些屬性和方法。select標籤用來定義下拉列表，包含任意數量的option和optgroup...

下拉列表框和組合框

組合框被操作時會向父視窗傳送通知訊息，這些通知訊息及其含義如下 cbn closeup 組合框的列表框元件被關閉，簡易組合框不會傳送該通知訊息 cbn dblclk 使用者在某列表項上雙擊滑鼠，只有簡易組合框才會傳送該通知訊息 cbn dropdown 組合框的列表框元件下拉，簡易式組合框不會傳送該...

自繪下拉列表框

原始檔 下拉列表框，又稱組合列表框，他是乙個較為複雜的控制項。它有三種狀態，drop down drop list。由三個控制項組成，編輯框 下拉按鈕 listbox。所以，要實現下拉列表框的綜合自繪，其工作量是蠻大的。而且，在一些特殊場合，要求下拉列表框具有一些特殊要求，所以想在乙個例子中完全實現...