在 AJAX 来源的 Select2 上以编程方式选择选项

Question

我正在使用 Select2 jQuery 插件 (v4.0.3) 来处理我正在进行的项目。 select2 实例是 ajax 来源的，我想知道是否有一种方法可以以编程方式选择选项。

我之前可以通过以下方式设置值：

$('#input-field').val(['123','456']).trigger('change')

当它不是 ajax 来源时。现在我需要使用 ajax 来源的 Select2 实例来实现它。

我创建了一个 jsFiddle 实例，以便您明白我的意思。单击 Set Values 应该会在 select2 实例中选择 2 个值。

谢谢！

PS我什至尝试将tags 选项设置为true，因此可以选择任何值（即使它不是来自 AJAX 查询的结果），但它仍然不起作用

Answer 1

您似乎无法以编程方式选择以前未从下拉列表中搜索和选择的内容。

当使用 AJAX 数据时，Select2 似乎通过在发现它们时将以前未知的选项添加到基础select 元素来工作。 .val() 正在尝试添加您想要的项目，但只能添加已经存在的项目，其余的将被忽略。 Select2 然后获取change 事件并相应地调整渲染。

这至少应该给你一个有用的方向：

$('#set-selected').click(function(e){
  e.preventDefault();
  var $select = $('.js-data-example-ajax');
  var targets = ["28200583","3620194"];
  targets.forEach(function(v,i,a){
    if(!$('option[value='+v+']',$select).length) {
      $select.append('<option value="'+v+'">'+v+'</option>');
    }
  });
  $select.val(targets).trigger('change');
});

通常，这些 UI 库的情况是您以与初始化控件相同的方式操作控件，在这种情况下通过调用 .select2()。但是，在这种情况下，我无法找到可以满足您需要的那种形式的命令。