通过 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')

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

更新：与我想要完成的相关 link： 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>

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

Set data of a Multiple Select2 element through javascript

javascript

asp.net-ajax

jquery-select2