話說一直以來，jQuery都是用select2居多
但是最近user提到的需求中，select2在客製化呈現上的需求就出現了缺口
比如：全選/全取消，多選時的文字狀態客製(較不容易)
因此另外找了一套也是不錯用的bootstrap-select(目前是v1.13.18)
https://developer.snapappointments.com/bootstrap-select/

在使用上，與select2的入手難易度差不多
它主要是透過element的data屬性做初始化
比如我要做多選的話，初始設定如下：

$(select).attr("multiple", "multiple");        // 決定多選
$(select).attr("data-actions-box", "true");    // 開啟全選/全取消的按鈕
$(select).attr("data-live-search", "true");    // 開啟選項的搜尋框
$(select).attr("title", "6");                  // placeholder
$(select).attr("data-size", "6");              // 清單的可視長度

其它還有一些options可以參考它的文檔，這邊不多提

那話說回來，既然上面都有文檔可查了，又好設定&上手
這篇要筆記的重點(如標題)呢

沒錯，我們來看bootstrap-select的本質
它是用button來做到類似select的效果(像select2則是用div)
因此在多選時候，它需要一行放置 全選/全取消 的按鈕列
可是在單選的場景，就會遇到一個狀況
萬一使用者選錯選項，要清掉怎麼辦？
網上能看到的有三類

1. 它下一版會內建此機制，所以開發時間上能等的，可以考慮
2. 另外加一個按鈕去trigger，或者使用別人再包一層的套件(但我覺得我只要一個清除鈕，不用搞這麼複雜)
3. 把actionsBox打開，加上maxOptions=1，但這對於單選的使用邏輯很奇怪？！

因此就有了以下加工以及這篇文章

(下述的$(select)要換成自己對應的元素)

首先，我們先處理把清除元素放到button裡，這裡用的是x(比照select2)，然後加一個專用屬性

$(*select*).attr("data-allow-clear", "true");        // 允許清除(單選用)

再來，需要處理一下它的樣式

div.bootstrap-select div.bootstrap-select__clear {
    color: #6c757d;
    cursor: pointer;
    float: right;
    font-weight: 700;
    position: absolute;
    right: 28px;
    top: 12px;
}

最後，binding一下bootstrap-select內建的事件

if ($(select).attr('multiple') == undefined) {
    $(select).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        if ($(select).attr('data-allow-clear') && $(select).val() != '') {
            $(select).closest('div.bootstrap-select').append('<div class="bootstrap-select__clear">×</div>');
            $(select).closest('div.bootstrap-select').on('click', 'div.bootstrap-select__clear', function () {
                $(select).val('').selectpicker("refresh");
                $(this).remove();
            });
        }
    });
}

這樣就大功告成了，很輕薄的解決一個擾人的小問題
以上做個筆記