Select2下拉菜单动态启用禁用选项功能异常问题求助

Select2初始化完成后会生成一套独立的下拉选项渲染DOM，与原生<select>的<option>节点相互分离。只有主动触发Select2的选项刷新动作时，它才会重新读取原生<option>的最新属性（比如禁用状态、文本、取值等）同步到渲染层。
现有代码仅触发了change事件，该事件仅用于通知Select2「选中值发生变更」，不会触发选项列表的状态同步：

• 未点开过下拉框时，Select2还未生成渲染缓存，下次点开时会主动读取一次原生<option>的状态，因此修改可以正常生效
• 已点开过一次下拉框时，渲染缓存已经生成，后续未主动触发刷新的前提下，Select2会一直沿用旧的缓存状态，因此修改原生<option>的disabled属性看不到效果

修改DeleteRow函数，将触发change事件替换为触发Select2的select2:refresh事件，强制它同步原生<option>的最新状态即可：

function DeleteRow(sender) {
        var taskId = $(sender).parent().parent().attr("task-id");
        var option = $('#add-task-select').find('option[value="' + taskId + '"]');
        option.prop('disabled', false);
        // 触发select2刷新选项列表，同步原生option的最新状态
        $('#add-task-select').trigger('select2:refresh');
        $(sender).parent().parent().remove();
}

如果上述写法在你使用的Select2版本中不生效，也可以使用调用refresh方法的写法：

$('#add-task-select').select2('refresh');

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