下拉樹列表選單選擇器

2021-07-04 05:17:24 字數 676 閱讀 3701

雖然網上有許多的實現下拉樹列表選單的實現,但都是基於某一框架的,感覺使用起來過於複雜。

為了鞏固學習的js知識,於是嘗試著自己寫乙個。

這個下拉樹列表整體放置在乙個div中。為了使其看起來和html自帶的下拉列表類似,我選擇了使用select標籤,但一開始並不在其中巢狀option選項。(其實也可以用input自己實現乙個,只不過我覺得這樣用方便也美觀......)

在select標籤之後跟著乙個div,主要用來放置目錄列表,目錄用ul標籤巢狀的方式實現。該div使用絕對定位(這樣在div顯示的時候就不會占用文件空間),並且初始出於隱藏狀態。

通過給select標籤新增click事件監聽,使目錄div顯示。

在選擇目錄後,生成乙個option選項,將其加入到select中並將其選中,但option還是要隱藏,就可以在select中設定值了。(因為好像select不能直接通過給value賦值的方法賦值,所以只能採用這個折中的辦法了。如果是用的input實現的,那麼直接對其value賦值,就沒這麼麻煩。)

目前我只是完成乙個粗略的結構,樹形結構的展開和收縮功能也還沒有加上,先寫下這些東西記錄下學習成果。隨後逐步完善。

下面是**

todo write content

bc

vue element下拉樹選擇器

專案需求 輸入框點選彈出樹形下拉結構,可多選或者單選。解決方案 1.使用layui formselect多選外掛程式 2.基於vue elementui 下拉框和樹形控制項組合成樹形下拉結構 data function handlecheckchange data,checked,node let ...

表單選擇器,層次選擇器

jquery在大二的時候接觸過,但是做的那個淡入淡出的效果。昨天上的第一堂課,老師說,主要包括類選擇器,昨天下午聽的時候感覺很簡單,但是自己要是做起來,就不是那麼容易了,一開始寫的時候,括號裡面,引用class的時候前面要有個 引用id的時候前面要用 後面要有css樣式的話要.css 屬性 數值,或...

表單選擇器

顧名思義,表單選擇器是為了能更加容易地操作表單,表單選擇器是根據元素型別來定義的。表單選擇器規則 表單選擇器 選 擇 器 描 述返 回 示 例 input 選取所有的 和元素集合元素 input 選取所有的 和元素 text 選取所有的單行文字框 集合元素 text 選取所有的單行文字框 passw...