在＆＃39; destroy＆＃39;

Question

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

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

还尝试了一种不同的方法，将选项直接设置为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>