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

Posted 2023-05-07

【中文标题】通过 Ajax 检索其数据的 select2 的编程选择

【英文标题】：Programmatic selection of select2 which retrieves its data via Ajax

【发布时间】：2015-06-24 15:21:00

【问题描述】：

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

在文档中，我发现了如何以编程方式将值设置为常规 select2，但我不知道如何使用 ajax 选择来执行此操作。

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

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

我已经尝试过了，并发送了一个包含 id、文本和结果的数据对象，但没有任何可见的反应，当我查询选择框的状态时，要查看选择的值，它返回 null。

这个选项是被删除了，还是只是被改变了？在文档中哪里可以找到它，或者如何实现所需的行为？

【参考方案1】：

实现此目的的唯一方法是首先将<option> 添加到带有您要选择的数据的选择dom，然后像使用常规选择框一样选择它。这也是 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");

【讨论】：

这是我希望避免的——从我的 JS 代码中自己填充列表。我想要求 select2 执行单击时会执行的 AJAX 加载，然后在我的 JS 代码中选择新加载的结果之一。看起来不可能？

您需要的第一部分可能是可能的（我必须研究一下），但选择部分只能通过上述解决方案实现（至少在 4.0 版本中）。也许制作这个很棒的插件的人会在以后的版本中包含一个编程解决方案，让我们希望它:) 同时，我将检查是否可以通过 javascript 填充搜索框，而无需单击，我我会尽快回复我的发现

【参考方案2】：

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

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

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

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

这似乎是因为它只会在您实际点击它们时将<options> 添加到底层select 元素中。

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

【参考方案3】：

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

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

Demo

【参考方案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。