禁用所选选项后，select2不更新

Question

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.

My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.

$("#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");
});

See example : https://jsfiddle.net/bkqeqbay/1/

Answer 1

You can use the select event and the data like so:

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

Updated fiddle: https://jsfiddle.net/bkqeqbay/4/

Note that if you must also disable the underlying select element option you can do:

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