Select2 удалить вариант по умолчанию, когда другой выбран - PullRequest
Новая
       4

Select2 удалить вариант по умолчанию, когда другой выбран

1 голос
/ 30 марта 2020

Я бы хотел, чтобы опция по умолчанию действовала как заполнитель.

Я делаю ajax поиск продуктов. Я хочу, чтобы в моем поле ввода отображалось «Все», пока я не выбрал продукт.

Это будет представление по умолчанию:

enter image description here

Но как только я выберу продукт, я хочу, чтобы все исчезло, и только продукт, который нужно показать: enter image description here

Я собрал кодовую ручку, чтобы, как мы надеемся, добиться успеха. !

Спасибо всем!

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>

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

1 Ответ

1 голос
/ 30 марта 2020

Мы можем использовать событие change для собственных элементов select и его версию с областью действия change.select2.

При добавлении плагина select2 к элементу событие change запускается всякий раз, когда опция выбрана или удалена.

Итак, когда добавлена ​​опция из списка asyn c, мы должны удалить опцию all. Кроме того, когда все параметры удалены (выбор не имеет значения), мы должны повторно добавить параметр all. Но нам нужно сообщить select2 об изменениях, поэтому мы запускаем событие change.select2.

Полный код: 

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: https://codepen.io/andreivictor/pen/yLNZzbb

Подробнее о событиях Select2:

...