Select2 remove default option when another selected

I'd like to have a default option act like a placeholder.

I'm doing an ajax search for Products. I want my input box to show "All" until I've selected a product.

This will be the default view:

But as soon as I select a product, I want All to disappear and just the product to show:

I've put together a codepen to hopefully get things rolling!

Thank you all!

HTML:

<div class="container">

  <select class="form-control am-product-selector__product-list-select" name="choices-multiple-default" id="choices-multiple-default" placeholder="All Products" multiple>
    <option value="All" selected>All</option>

  </select>

</div>

And the JS:


const options = [{ id: 1, text: 'All' }];

const select2Instance = jQuery( '#choices-multiple-default' ).select2( {
        placeholder: 'Search products',
        ajax: {
            url: url,
            dataType: 'json',
            delay: 250,

            data: params => {
                return {
                    //term: params.term // search query
                };
            },

            // Process fetched results
            processResults: data => {
                if ( data ) {
                    data.map( item => {
                        options.push( { id: item.id, text: item.title } );
                    } );
                }

                return {
                    results: options
                };
            },
            cache: true
        },
        minimumInputLength: 3 // the minimum of symbols to input before perform a search
    } );

Solution

First, let's outline the scenarios that need to be handled:

1) Adding an option (other than "All") from the async list.

When an option (other than "All") is selected, remove the "All" option from the selection.
This will be handled before selection.

2) Deleting all options (no values in the select).

When all options are unselected, the "All" option should automatically be re-added.
This will be handled after selection.

3) Selecting the "All" option from the dropdown.

When "All" is selected, clear all other selections.
This will be handled before selection.

Now, let's explore how we can use the Select2 Events API to handle these scenarios:

select2:selecting event - Triggered before a result is selected.
select2:unselectevent - Triggered whenever a selection is removed.

The code is:

select2Instance.on('select2:selecting', function (e) {
  // Get the value of the item being selected
  const valueToSelect = e.params.args.data;
  
  // Get the current selected values in the dropdown
  const currentValues = $(this).val();
  
  // If the option being selected is 'All', or if 'All' is already selected, clear current selections.
  // The selected result will be added after clear.
  if (valueToSelect.id === 'all' || currentValues.includes('all')) {
    $(this).val([]);
  }
});

select2Instance.on('select2:unselect', function () {
  const values = $(this).val();
  
  // If no values are left after unselecting, automatically set the value to 'all'.
  // This ensures that when all options are unselected, the dropdown defaults to 'all'.
  if (values.length === 0) {
    $(this).val('all');
  }
  
  // Trigger the 'change.select2' event specifically for Select2 to notify it of the changes.
  $(this).trigger('change.select2');
});

Demo: https://codepen.io/andreivictor/pen/MYgvRoV

More info about Select2 Events: