Question

嗨javascript专家。

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

看了所有有关这方面的问题，并按照官方的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
    }
.....

Answer 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

（回答我自己的问题以防其他有同样问题的人出现）

select2 4.0.3中的动态加载选项

1 个答案: