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

Question

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

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

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

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

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

谢谢！

P.S. 我什至尝试将 tags 选项设置为 true，因此任何值都可以得到 selected （即使它不是 AJAX 查询的结果），它仍然不起作用

Answer 1

您似乎无法以编程方式select 以前未搜索过的内容并从下拉列表中select编辑。

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()。但是，我无法在这种情况下找到满足您需要的那种形式的命令。

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

Programmatically selecting option(s) on AJAX sourced Select2

javascript

ajax

jquery

select2