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 修改時.

selected 的寫法，並不是 html 預設寫法

這一點，是滿特別的，一般 select tag 在option 裡設定 selected 就會變成預設值，在 nice select 也是沒錯，但由於 nice select 並不會去清除(或重設) selected property, 會造成 selected 項目會愈來愈多。

nice select 1 的解法：

Add a data-display attribute to the desired options. For example:

<select>
  <option data-display="Select">Nothing</option>
  <option value="1">Some option</option>
  <option value="2">Another option</option>
  <option value="3" disabled>A disabled option</option>
  <option value="4">Potato</option>
</select>

如果你使用的 nice select 2 版本，較舊，更新 nice select 2 版本後，就可以解決 selected 項目沒有被預期地清除的問題。

結論

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

javascript