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

Question

我想让默认选项像占位符一样。

我正在用ajax搜索产品。在选择产品之前，我希望输入框显示“全部”。

这将是默认视图：

但是，一旦我选择了一个产品，我希望所有商品都消失，只显示该产品：

我整理了一个代码笔，希望一切顺利！

谢谢大家！

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

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

在元素上添加select2插件时，无论选择还是删除选项，都会触发change事件。

因此，当从异步列表中添加一个选项时，我们应该删除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事件的更多信息：

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