Javascript – How do i allow clear items only on specific items on Select 2 multi select

Not the best approach because I should not rely on the option label since it may not be unique but this is the only solution I got.

Let's say I have a select like this

<select name="" id="" multiple>
        <option selected value="1">item 1</option>
        <option selected value="2">item 2</option>
        <option value="3">item 3</option>
        <option value="4">item 4</option>
      </select>

and you want the selected values to be unclearable, u can achieve this with this simple code:

import "./style.css";
import $ from "jquery";
import select2 from "select2";
import "select2/dist/css/select2.min.css";
select2($);
// list of excluded items labels
const excludedItemsTitles = ["item 1", "item 2"];
//disable selected items function
const disbaleSelectedItems = function () {
  $(".select2-selection__choice").each(function () {
    //get the list item title
    const currentItemTitle = $(this).attr("title");
    //check if current item title on the array
    if (excludedItemsTitles.includes(currentItemTitle)) //remove delete button
      $(this).children("button.select2-selection__choice__remove").remove();
  });
};
$(() => {
  $("select").select2();
//calling it here so it disables the options u want on the initial load
  disbaleSelectedItems();
/* 
  this is required because select2 reRender everytime a change occur
  so u have to disable options again
*/ 
  $("select").on("change", disbaleSelectedItems);
});

u can also use the data-unclearable attribute for example on the options u want do not want them to be clearable, and check if the attribute is there.