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