通过 Ajax 检索数据的 select2 的编程选择

Question

我正在使用 select2 4.0 版，我正在尝试对 select 框进行程序化 selection，该框从 ajax 获取数据打电话。

在文档中，我找到了如何以编程方式将值设置为常规 select2，但我不知道如何使用 ajax select .

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

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

我试过了，发送了一个数据对象，id，文本和结果，但是没有任何可见的发生，当我查询 select 框的状态时，看到 selected 值，它 returns 为空。

这个选项是被删除了，还是只是改变了？我可以在文档中的何处找到它，或者我怎样才能实现所需的行为？

Answer 1

我也很想知道这个问题的完整答案，但这里有一个部分解决方案：

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

这似乎只有在 select2 已经加载了您要的项目时才有效 - 即它是您已经点击过的项目。

您不仅需要手动打开下拉菜单，以便它通过 AJAX 加载项目的第一页 - 您还必须 实际点击 您以后要以编程方式 select 的那个。

这似乎是因为当您实际单击它们时，它只会将 <options> 添加到基础 select 元素。

我找不到以编程方式告诉 select2 加载 AJAX 结果的第一页的方法。

Answer 2

实现此目的的唯一方法是首先将 <option> 添加到 select dom 中，其中包含您想要 select 的数据，然后立即添加, select 就像您使用常规 select 框一样。这也是 kevin-brown 在他们的 github 项目页面上的官方回答。

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

所以，基本上，如果您知道自己想要什么 select，您可以轻松地从中创建一个 <option> 元素，将其添加到原始 select 框中，然后然后 select 它的值：

var option=jQuery("<option>").attr("value","your_id_here").html("your_text_here");
jQuery("selectbox").append(option);
jQuery("selectbox").val("your_id_here").trigger("change");

Answer 3

你可以试试这个。

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

在 Div #LoadMachine 中加载数据，结果您可以加载 select2。

Answer 4

操作隐藏的 <select/> 框很容易：

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

Demo

通过 Ajax 检索数据的 select2 的编程选择

Programmatic selection of select2 which retrieves its data via Ajax

ajax

jquery

jquery-select2

jquery-select2-4