使用bootstrap-select多选时，如何在change事件中获取点击的选项值？

在bootstrap-select的多选场景中，原生change事件无法直接获取本次点击的单个选项值，原因是组件封装后，该事件触发时仅能拿到所有已选中的选项集合。需要使用bootstrap-select专属的changed.bs.select事件来实现需求。

可行代码示例 #

方式一：通过事件参数获取 #

$('#bootstrap-select').on('changed.bs.select', function (e, clickedIndex, isSelected) {
    // 根据点击索引获取对应的option元素
    const clickedOption = $(this).find('option').eq(clickedIndex);
    // 获取本次点击的选项值
    const clickedValue = clickedOption.val();
    
    console.log('本次点击的选项值:', clickedValue);
    // 可选：判断当前操作是选中还是取消选中
    console.log('操作类型:', isSelected ? '选中' : '取消选中');
});

方式二：通过relatedTarget获取 #

$('#bootstrap-select').on('changed.bs.select', function (e) {
    if (e.relatedTarget) {
        // 直接从点击的DOM元素中提取value
        const clickedValue = $(e.relatedTarget).val();
        console.log('本次点击的选项值:', clickedValue);
    }
});

原代码失效原因说明 #

• 第一个代码返回undefined：在bootstrap-select的多选模式下，原生select的this.value属性无法正确返回选中值，组件封装后已覆盖了原生的部分行为。
• 第二个代码返回所有选中值：$(this).val()是bootstrap-select提供的获取全部选中值的方法，符合组件设计逻辑，但无法满足单次点击的取值需求。

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