user1614862 user1614862 - 2 years ago 2283
Javascript Question

How to remove selected option from the option list in select2 multiselect and show selected options in the order they are selected

I have select2 multi select field in my form where I want to remove the selected option from the dropdown list after it is selected and again add it to the list if it is removed from the list. And also the added items should be in the same order as they selected. The current select2 (4.0) is not removing the selected the items and and it is showing the selected items in the order they appear in the drop down list, not in the order they are selected.

allowClear: true,
minimumResultsForSearch: -1,
width: 600


Answer Source

Part #1 of Q:

You can do a CSS trick to hide selected item like this:

.select2-results__option[aria-selected=true] {
    display: none;

Part #2 of Q:

Also you can do a JQuery trick to force selected items to end of tags box, ( by getting selected item on select, detach it (remove it), then reAppend it to tags box, then call "change function" to apply changes ):

$("select").on("select2:select", function (evt) {
    var element =;
    var $element = $(element);

Finally Updated JsFiddle, I hope it works for you, Thanks !

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download