select2 4.0.3 中的动态加载选项答案

【问题标题】：Dynamic loading options in select2 4.0.3select2 4.0.3 中的动态加载选项
【发布时间】：2017-12-17 08:01:12
【问题描述】：

您好 javascript 专家。

我正在尝试通过 ajax get reguest 获取一组选项，并将结果作为一组选项插入到 select2 下拉列表中。

查看了关于 SO 的所有问题，并遵循了官方 select2 指南 (https://select2.github.io/examples.html#data)，这让我有点困惑，我提取了一个简单的例子来说明这个问题。还尝试使用硬编码数组而不是从 ajax 调用返回的数据。

<html>

    <script type="text/javascript">
        $(function () {
            $("#ArbiterId").select2();

            FillArbiters(true);
        });

        function FillArbiters(eloOnly) {
            $.ajax({
                url: "/MasterData/Arbiters", dataType: "json",
                data: { 'eloOnly': eloOnly },
                type: "get",
                cache: false,
                success: function (data) {
                    console.log(data);
                    $("#ArbiterId").select2({ data: data.arbiters });
               //     $("#ArbiterId").select2({ data: [{ id: 0, text: 'dummy' }] });
                }
            });
        }
    </script>

    <body>
    <form>
        <select id="ArbiterId" name="ArbiterId"></select>
    </form>
    </body>

    </html>

谁能告诉我我做错了什么？

ajax 的输出如下所示：

{
  "success": true,
  "arbiters": [
    {
      "text": " name 1",
      "id": 11446
    },
    {
      "text": "name 2",
      "id": 10786
    }
.....

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

原来我试图将 #ArbiterId 初始化为 select2 框两次，这是不允许的（如果 select2 告诉我这件事会很好）

动态更改选项的正确方法是首先销毁 select2 框，然后重新创建它，例如改变

$("#ArbiterId").select2({ data: data.arbiters });

到

$("#ArbiterId").select2('destroy').empty().select2({ data: data.arbiters });

可以在此处找到有关此主题的更多信息： https://github.com/select2/select2/issues/2830

（回答我自己的问题，以防遇到同样问题的其他人）

【讨论】：