Select2 当另一个选择时删除默认选项

Question

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!

https://codepen.io/saltcod/pen/bGdzoGN

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
    } );

Answer 1

We can use the change event of native select elements and its scoped version change.select2 .

When adding select2 plugin on an element, the change event is triggered whenever an option is selected or removed.

So, when an option from the async list is added, we should remove the all option. Also, when all options are deleted (the select has no value), we should re-add the all option. But we need to inform the select2 about the changes, so we trigger change.select2 event.

The full code is:

select2Instance.on('change', function () {
  const values = $(this).val();
  if (values.length > 1) {
    const index = values.indexOf('all');
    if (index > -1) {
      values.splice(index, 1);
      $(this).val(values);
    }
  } else if (values.length === 0) {
    $(this).val('all');
  }
  $(this).trigger('change.select2'); // Notify only Select2 of changes;
});

Codepen demo: https://codepen.io/andreivictor/pen/yLNZzbb

More info about Select2 Events:

• https://select2.org/programmatic-control/events
• https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event