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

Question

我希望有一个默认选项像占位符一样。

我正在对产品进行 ajax 搜索。 我希望我的输入框显示“全部”，直到我选择了一个产品。

这将是默认视图：

但是一旦我选择了一个产品，我就希望 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>

和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

我们可以使用原生select元素的change事件及其作用域版本change.select2 。

在元素上添加select2插件时，只要选择或删除选项，就会触发change事件。

因此，当添加异步列表中的选项时，我们应该删除all选项。 另外，当所有选项都被删除后（select没有值），我们应该重新添加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 事件的更多信息：

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