Select2 clear 'x' button to set default value?

Question

Is it possible that pressing "x" button on Select2 dropdown with allowClear enabled set default (predefined) value?

Answer 1

Use the onchange event. Check if the value is empty and set the value to whatever predefined is.

$("select").on("change", function (e) {
   if($(this).val()==""){
      $(this).val("predefined value");
   }
});

Answer 2

Select2 allows you to associate the placeholder with an id other than a blank string.

$("select").select2({
  placeholder: {
    id: "the_predefined_value",
    text: "The placeholder text"
  }
});

So when you click on the "x", it will set the value to the_predefined_value and display the placeholder text. You are going to need an <option> with a value of the_predefined_value in order for this to work.

Answer 3

The code i have written below will work for you,

$(".myselect").select2({
     placeholder: "Select a option",
     allowClear: true,
     width: '100%'
 }).off('select2:clear').on('select2:clear', (e) => {
     $(e.currentTarget).val("predefined value");
 });