如何在删除Select2选项前触发提示弹窗？

要在用户尝试删除Select2选项时弹出提示，你需要监听Select2的select2:unselect事件——这个事件会在选项被移除前触发，正好用来添加确认逻辑。

修改后的完整代码 #

$(document).ready(function () {
     $("#select_name").select2({
        multiple: true,
        maximumSelectionLength: 2,
        minimumInputLength: 2,
    }).on('select2:select', function (e) {
        // 保留你原有的选择逻辑：清空后仅保留当前选中项
        $(this).val([]).trigger('change');
        $(this).val([e.params.data.id]).trigger("change");      
    }).on('select2:unselect', function (e) {
        // 弹出确认提示弹窗
        const confirmDelete = confirm('确定要删除这个选项吗？');
        if (!confirmDelete) {
            // 用户取消时，阻止删除动作
            e.preventDefault();
        }
    });
});

关键逻辑说明 #

• select2:unselect：Select2内置的事件，触发时机是用户点击选项旁的删除按钮或通过键盘移除选项时
• confirm()：原生弹窗方法，返回布尔值——用户点击「确定」返回true，「取消」返回false
• e.preventDefault()：如果用户取消删除，调用这个方法可以阻止Select2执行移除选项的默认动作

自定义条件提示示例 #

如果需要针对特定场景（比如删除特定ID的选项、当前选中数量不足时）才显示提示，可添加条件判断：

.on('select2:unselect', function (e) {
    // 示例：仅当删除ID为"key_option"的选项时显示提示
    if (e.params.data.id === 'key_option') {
        const confirmDelete = confirm('这是关键选项，确定要删除吗？');
        if (!confirmDelete) {
            e.preventDefault();
        }
    }
});

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