选择2：单击项目上的任意位置而不是交叉时从选择中删除项目

Question

是否有一种干净的方法可以删除多选框中select2项左侧的“十字”，并具有功能（在点击时删除所选项目）而不是为整个按钮启用？见图;而不是点击红色突出显示的十字架来删除项目，我希望能够点击绿色突出显示的按钮中的任何位置。

默认功能是打开选择下拉列表 - 可以单击文本框中的任意位置。另一方面，十字架很小，很容易错过点击。

如果没有“清洁”或“预期”的方式，欢迎提出解决方法的建议。

Answer 1

好的，把它整理好了。下载了未缩小的JS（4.0.6-rc.0）并执行了以下操作：

删除＆＃34;十字架，＆＃34;改变了这个

MultipleSelection.prototype.selectionContainer = function () {
        var $container = $(
        '<li class="select2-selection__choice">' +
            '<span class="select2-selection__choice__remove" role="presentation">' +
                '&times;' +
            '</span>' +
        '</li>'
    );
    return $container;
};

到此

MultipleSelection.prototype.selectionContainer = function () {
        var $container = $(
        '<li class="select2-selection__choice"></li>'
    );
    return $container;
};

要在标记点击上添加＆＃34;取消选择，＆＃34;添加了这个点击

this.$selection.on(
    'click',
    '.select2-selection__choice',
    function (evt) {
        // Ignore the event if it is disabled
        if (self.options.get('disabled')) {
            return;
        }

        var data = Utils.GetData(this, 'data');

        self.trigger('unselect', {originalEvent: evt, data: data})

        evt.stopPropagation()
    }
)

在函数内部

MultipleSelection.prototype.bind = function (container, $container) {
    ...
}

（非常类似于处理＆＃34;交叉＆＃34;正常点击）的现有代码

最后，将相关的CSS从cursor: default调整为cursor: pointer

最终结果：

Answer 2

另一种无需修改源代码的方法是仅使'x'的占用空间占据元素的大小：

/* pillbox li container item */
.select2-selection__choice {
    position: relative;
    padding-left: 15px; /* to account for the 'x' no longer taking up space */
}

/* the 'x' */
.select2-selection__choice__remove {
    position: absolute;
    left: 0; right: 0; /* to fill width */
    padding-left: 5px; /* whatever matches your pillbox padding */

    color: transparent !important; /* hide the x */
}