通过javascript设置Multiple Select2元素的数据

Question

我正在通过 Javascript、ajax 和 jquery 将多个值加载到 Select2 元素中。虽然数据加载正确并且加载后可以访问，但我无法在 Select2 元素中设置存储的数据。

编辑：我正在使用 Select2 v3.5。

我的代码：

HTML：

<input class="jsData" style="width: 100%"  id="select2Data"></input>

Javascript：

 $(".jsData").select2({
                        ajax: {
                            minimumInputLength: 4,
                            contentType: 'application/json',
                            url: '<%=Url.Action("GetData","Controller")%>',
                            type: 'POST',
                            dataType: 'json',
                            data: function (term) {
                                return {
                                    sSearchTerm: term
                                };
                            },
                            results: function (data) {
                                return {
                                    results: $.map(JSON.parse(data), function (item) {
                                        return {
                                            text: item.term,
                                            slug: item.slug,
                                            id: item.Id
                                        }
                                    })
                                };
                            }
                        },
                        multiple: true
                    });

因此，这将创建一个 Select2 元素，我可以在其中遍历数据库并根据我输入的内容加载数据。我还可以使用以下行访问数据（由用户输入）：

$('.jsData').select2('val')

以上行返回一个数组，我可以将它存储在数据库中。我当前的目标是将存储的数据设置回 Select2 元素中。非常欢迎在这件事上提供任何帮助。

更新：我想要完成的相关链接： https://select2.github.io/examples.html#programmatic

我想要在 Select2 中设置多个元素的示例。但是，不同之处在于，Select2 文档中的示例在加载页面时会带来数据，而我将前往获取数据。

Answer 1

Select2 v3.5.4 docs 对此有点困惑。我认为文档中存在误导性的错字。

首先，请注意，当我从远程源检索数据时，我将其作为{id: ##, name: NAME} 格式的对象返回。

第一步是添加initSelection参数并传递函数来检索之前选择的项目。

下一步，我认为有一个错字，是定义formatSelection 参数（不是它在文档中声明的formatResult）。此函数定义如何显示先前选择的结果。在这种情况下，我只是显示结果的name 属性。

formatResult 参数定义了如何显示新选择的选项。你会注意到formatResult 和formatSelection 在下面是相同的。我本可以重用一个函数，但觉得这更适合演示。

$(document).ready(function() {
  function formatResult(data) {
    return data.name;
  };

  function formatSelection(data) {
    return data.name; 
  }

  $(".jsData").select2({
    ajax: {
      minimumInputLength: 4,
      url: "https://jsonplaceholder.typicode.com/users",
      type: "GET",
      dataType: "json",
      results: function(data) {
        return {
          results: $.map(data, function(user) {
            return {
              name: user.name,
              id: user.id
            };
          })
        };
      }
    },
    initSelection: function(element, callback) {
      var id = $(element).val();
      if (id !== "") {
        $.ajax("https://jsonplaceholder.typicode.com/users/" + id, {
          dataType: "json"
        }).done(function(data) {
          callback(data);
        });
      }
    },
    formatResult: formatResult,
    formatSelection: formatSelection,
    multiple: true
  });
});

这是完整的工作示例：

$(document).ready(function() {
  function formatResult(data) {
    return data.name;
  };
  
  function formatSelection(data) {
    return data.name; 
  }

  $(".jsData").select2({
    ajax: {
      minimumInputLength: 4,
      url: "https://jsonplaceholder.typicode.com/users",
      type: "GET",
      dataType: "json",
      results: function(data) {
        return {
          results: $.map(data, function(user) {
            return {
              name: user.name,
              id: user.id
            };
          })
        };
      }
    },
    initSelection: function(element, callback) {
      var id = $(element).val();
      if (id !== "") {
        $.ajax("https://jsonplaceholder.typicode.com/users/" + id, {
          dataType: "json"
        }).done(function(data) {
          callback(data);
        });
      }
    },
    formatResult: formatResult,
    formatSelection: formatSelection,
    multiple: true
  });
});

.jsData {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet"/>

<input class="jsData" style="width: 100%"  id="select2Data" value="10"></input>