如何获取Bootstrap Multiselect中取消选中的选项值？

要实现取消选中已选选项时获取对应值，直接用原生onchange没法精准定位被取消的项，得用Bootstrap Select插件自带的changed.bs.select事件，下面是具体实现方案：

步骤1：调整HTML结构 #

先移除原select标签里的onchange="showValue(this)"，改用JS绑定插件专属事件：

<select
    class="form-control bootstrap-selectpicker"
    data-live-search="true"
    data-selected-text-format="count"
    name="colors[]"
    id="colors"
    multiple>
        <option value="1" selected>Red</option>
        <option value="2" selected>Yellow</option>
        <option value="3">White</option>
</select>

步骤2：绑定插件事件，获取取消选中项 #

用jQuery监听changed.bs.select事件，这个事件会返回点击元素的选中状态，当状态为未选中时，就能直接拿到被取消项的信息：

// 先确保插件已初始化（通常页面加载时执行）
$('.bootstrap-selectpicker').selectpicker();

// 绑定事件监听取消操作
$('#colors').on('changed.bs.select', function(e, clickedIndex, isSelected) {
    // isSelected为false时，说明当前操作是取消选中
    if (!isSelected) {
        const canceledOption = $(this).find('option').eq(clickedIndex);
        const canceledValue = canceledOption.val();
        const canceledText = canceledOption.text();
        
        console.log('被取消的选项值：', canceledValue);
        console.log('被取消的选项文本：', canceledText);
        // 在这里添加你的业务逻辑处理
    }
});

补充方案：对比选中值差异 #

如果不想依赖插件的事件参数，也可以通过保存上一次的选中值，和当前选中值对比找出被取消的项：

let lastSelected = $('#colors').val() || [];

$('#colors').on('changed.bs.select', function() {
    const currentSelected = $(this).val() || [];
    // 找出仅存在于上一次选中列表里的项，就是被取消的
    const canceledItems = lastSelected.filter(val => !currentSelected.includes(val));
    
    if (canceledItems.length > 0) {
        console.log('被取消的选项值：', canceledItems.join(', '));
    }
    // 更新上一次选中值为当前状态
    lastSelected = currentSelected;
});

注意：使用前需确保已正确引入jQuery、Bootstrap Select的CSS和JS文件。

内容的提问来源于stack exchange，提问作者Julan Mohajan