[实战之jQuery] bootstrap-select之单选时无清除按钮

话说一直以来，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)
因此在多选时候，它需要一行放置 全选/全取消 的按钮列
可是在单选的场景，就会遇到一个状况
万一使用者选错选项，要清掉怎么办？
网上能看到的有三类

它下一版会内建此机制，所以开发时间上能等的，可以考虑另外加一个按钮去trigger，或者使用别人再包一层的套件(但我觉得我只要一个清除钮，不用搞这么複杂)把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();            });        }    });}

这样就大功告成了，很轻薄的解决一个扰人的小问题
以上做个笔记