Nice Select 1 與 Nice Select 2使用心得

Posted in :

javascript筆記

2023-11-01

什麼是 nice select

雖然在 bootstrap 的世界裡, 已經讓 select 下拉框變的很酷炫與好看, 但是有很多功能還是無法完成, 最佳的解法還是透過 div(圖層) 來解決.

Max 一直都是使用 jquery nice select, 簡稱 nice select 1, 這個版本沒有提供 search 功能, 但是好心人升級的 nice select 2 有支援, 執行畫面如下:

下載點:

Nice Select
https://github.com/hernansartorio/jquery-nice-select
Nice Select 2
https://github.com/bluzky/nice-select2

使用 2 , 第一個遇到的問題, 是 initial 時無法使用 array, 但 nice select 可以, 解法如下:

if (jQuery("select.default-select").length > 0)
{
    const selectItems = document.querySelectorAll("select.default-select");
    selectItems.forEach((userItem) =>
    {
        NiceSelect.bind(userItem);
    }
    );
}

如果使用上面的程式碼, 會遇到另一個問題, 就是第二次 NiceSelect.bind() 時, 會產生出新的 div 區塊, 所以不能像 nice select 1 一樣, 在 .update() 時, 可以更新回去第一次產生出來的div element.

解法, 很簡單, 也很多個,

解法1: 上面的程式碼修改成 gloabl array.
解法2: 一個一個的 select 都變成獨立的全域變數.

優缺點比較

如果沒有使用到下拉框的查詢功能, 使用 nice select 1 會比較好, 因為一行指令就可以把網頁裡用的到 select 直接變成 div, 等到有需要同步select 內容時, 才需要額外使用 jQuery 讓 select 裡的內容值, 更新回去div 裡.

nice select 2 暫時無法對同一個select 產生同一個div, 是比較麻煩的地方, 同步上需要另外做控制.

nice select 同步時間點

有2個情況下, 需要把 select 裡的內容同步回去 div 裡,

select 裡 options 選項內容改變。
selected default value 不是由使用者透過 div 修改時.

結論

選擇用那一個，其實差異不大，在專案裡有需要使用關鍵字過濾 select 內容時，只能選擇 nice select 1, 但是如果沒有需要 search 功能該選 nice select 1 還是 nice select 2? 也許選 nice select 2 利大於弊的樣子, 畢竟, 功能可以先放著不用, 等未來有需要時, 再開啟。

javascript