Ajax - Why Does The Removed Option Remain in the DOM? šŸ˜„

Is this a bug?
#1

Hello, thanks so much for this great library.

I have a question!

On the https://select2.org/data-sources/ajax page it says:

For remote data sources only , Select2 does not create a new <option> element until the item has been selected for the first time. This is done for performance reasons. Once an <option> has been created, it will remain in the DOM even if the selection is later changed.

Why is this? I thought it was a bug at first but then I see it is by design. If this is the case, how do I send the correct selected options to the server from the select element, if Iā€™m using ajax and multiple select and I need to remove a previously selected item?

Thank you very much for your time!

#2

I used the event system as a workaround, although Iā€™m still curious why this is by design.

Code example:

 jQuery(document).on('ready',function(){

        jQuery('#selectElementCalledSelect2On').on('select2:unselect', function (e) {

            var data = e.params.data;

            console.log('data',data);

            jQuery(data.element).remove();

        });

    });
#3

Even though each previously selected item will leave an <option> element in the DOM, once those items are no longer selected, their <option> elements will not have the selected attribute. The only <option>s that will have the selected attribute are the ones representing the item(s) that are currently selected in the Select2 widget. So at the point when you submit the form, the underlying <select> element will contain <option selected> elements for all of the currently selected items, as well as some <option>s without the selected attribute. This is no different than how a hard-coded <select> element would behave in the same circumstances.