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

Question

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

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

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

当它不是 ajax 来源时。现在我需要让它与 ajax 来源的 Select2 实例一起工作。

我创建了一个 jsFiddle 实例，只是为了让您明白我的意思。单击“设置值”应在 select2 实例中选择 2 个值。

谢谢!

P.S. 我什至尝试将 tags 选项设置为 true，因此可以选择任何值(即使它不是来自AJAX查询)，仍然不起作用

Answer 1

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

Select2 在使用 AJAX 数据时，似乎是通过在发现之前未知的选项时将其添加到底层 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()。但是，我无法找到该形式的命令来完成您在这种情况下所需的操作。