javascript - 禁用所选选项后 select2 未更新

Question

我试图禁用 select2 中选定的选项，但 select2 似乎没有刷新。

我的目的是在选择 select2 列表中的每个项目后禁用它。我看到该选项已禁用属性的 HTML，但该选项在 select2 元素中仍处于启用状态。

$("#select-filter").select2({
    placeholder: "Select a category",
    data:[{
        id: "",
        text: ""
    },{
        id: "project",
        text: "project"
    },{
        id: "date",
        text: "date"
    },{
        id: "user",
        text: "user"
    }]
}).on("change", function(e) {
    $("#select-filter :selected").attr("disabled", "true");
});

参见示例:https://jsfiddle.net/bkqeqbay/1/

Answer 1

您可以像这样使用选择事件和数据:

...}).on("select2:select", function(e) {
  console.dir(e.params.data);
  e.params.data.disabled = true;
});

更新的 fiddle :https://jsfiddle.net/bkqeqbay/4/

请注意，如果您还必须禁用底层选择元素选项，您可以执行以下操作:

 var index = $(e.params.data.element).index();
 $("#select-filter").find('option').eq(index).prop('disabled',true);