在 'destroy' 之后使用新选项初始化后 Select2 AJAX 调用没有发生

Question

我运行遇到一个问题，我需要使用 Select2 插件将 <select> 从常规列表更改为 AJAX 结果。我设法更改 <select> 上的选项，但如果我尝试搜索，AJAX 调用永远不会发生。这是我的简化代码：

$(function() {
  $('select').select2();
  $('button').on('click', function() {
    var options = $('select').data('select2').options.options;

    console.log(options);

    options.ajax = {
      url: '/echo/json',
      dataType: 'json',
      delay: 250
    };

    $('select').data(options);
    $('select').empty();
    $('select').select2('destroy');
    $('select').select2();

    console.log($('select').data('select2').options.options);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>


<div>
  <select style="width: 100px;">
  <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <button>Refresh</button>
</div>

还尝试了一种不同的方法，将选项直接设置为 Select2，但没有成功：

$('select').empty();
$('select').select2('destroy');
$('select').select2(options);

在这两种情况下，选项中的 AJAX 对象在刷新后都存在。任何应该更改以触发 AJAX 调用的建议都将受到赞赏。

Answer 1

您无法使用所有先前的实例选项重新初始化 select2。

你需要做这样的事情：

$(function() {
  $('select').select2();
  $('button').on('click', function() {    
    // extending incase there is some data-* options
    var options = Object.assign({}, $('select').dataset, {
      ajax: {
        url: '/echo/json',
        dataType: 'json',
        delay: 250
      }
    });

    $('select').empty();
    $('select').select2('destroy');
    $('select').select2(options);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>


<div>
  <select style="width: 100px;">
  <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <button>Refresh</button>
</div>

在 'destroy' 之后使用新选项初始化后 Select2 AJAX 调用没有发生

Selec2 AJAX call not happening after initializing with new options after 'destroy'

javascript

ajax

jquery

jquery-plugins

jquery-select2