Question

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

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

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

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

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

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

Answer 1

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

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

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

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 2

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

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

如果select2已经加载了您要求的项目 - 即您已经点击过的项目，那么这似乎才有效。

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

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

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

Answer 3

将隐藏的<select/>框操作为：

很容易

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

<强> Demo

Answer 4

你可以试试这个。

    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。

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

4 个答案: