编程选择select2,它通过Ajax检索其数据

我正在使用select2版本4.0,我正在尝试对选择框进行编程选择,该框从ajax调用获取其数据。

在文档中,我找到了如何以编程方式将值设置为常规select2,但我无法弄清楚如何使用ajax select来执行此操作。

如果我没记错的话,在旧版本中,您可以通过使用以下命令将数据传递给select2来设置当前值:

jQuery("selectbox").select2("data", data) 

我试过这个,并发送了一个带有,id,text和result的数据对象,但没有任何可见的事情发生,当我查询选择框的状态时,为了查看所选的值,它返回null。

此选项已删除,或只是更改? 我在哪里可以在文档中找到它,或者我怎样才能实现所需的行为?

实现此目的的唯一方法是首先使用您要选择的数据向选择dom添加 ,然后选择它,就像使用常规选择框一样。 这也是kevin-brown在他们的github项目页面上的正式答案。

https://github.com/select2/select2/issues/3273

所以,基本上,如果你知道你想要选择什么,你可以轻松地从它创建一个元素,将它添加到原始选择框,然后按它的值选择它:

 var option=jQuery(" 

我也想知道对此的完整答案,但这是一个部分解决方案:

 $('#select2-control-id').val('item-id').trigger('select2:select').trigger('change'); 

这似乎只有在select2已经加载了你要求的项目时才有效 – 也就是说你已经点击了它。

您不仅必须手动打开下拉列表,还要通过AJAX加载第一页项目 – 您还必须实际点击要稍后以编程方式选择的项目。

这似乎是因为它只在您实际点击它们时将添加到基础select元素。

我无法通过编程方式告诉select2加载AJAX结果的第一页。

操作隐藏的框很容易:

 //set first option as selected $("select [value='0']").attr("selected","selected"); $("select").trigger("change"); 

演示

你可以试试这个。

  var dataString = 'id='+$value; var promise = sendAjaxFunction('load_form.php?k=1',dataString); $("#LoadMachine").html(""); promise.success(function (data) { $("#LoadMachine").html(data); $("#MachineName").select2({ placeholder: 'Select Operation Name ...', allowClear: true }); return false; }); 

将数据加载到Div #LoadMachine中,结果您可以加载select2。