初始化后用 JSON 填充 select2 不起作用答案

【问题标题】：Populate select2 with JSON after init doesnt work初始化后用 JSON 填充 select2 不起作用
【发布时间】：2015-08-10 13:15:51
【问题描述】：

我正在尝试使用 JSON 数组填充 select2 元素；但我无法得到它。

我有下一个数组：

data = [{"id":"Foo","text":"Foo"},{"id":"Bar","text":"Bar"}]

我将 select2 初始化如下：

$("#selectElement").select2();

我使用下一个代码来填充：

$('#selectElement').select2('data', data, true);

但是不起作用，我不知道为什么。有人可以帮助我吗？

编辑：我需要在 select2 初始化之后填充（我从 AJAX 接收 JSON）

我的意图是用其他 select2 的 AJAX 搜索的 JSON 填充我的问题的 select2。

除了填充之外一切都很好（我在第一个的 formatSelectiom 方法中很好地得到了这个 JSON，但我不知道我可以用这个填充第二个 select2）

【问题讨论】：

标签： jquery json jquery-select2 populate

【解决方案1】：

我发现您的代码与 select2 的代码之间存在一些差异

您的数据：

var data = [{"id":"Foo","text":"Foo"},{"id":"Bar","text":"Bar"}];

应该是：

var data = [{id:"Foo", text:"Foo"},{id:"Bar", text:"Bar"}]

您的人口代码：

$('#selectElement').select2('data', data, true);

应该是：

$('#selectElement').select2({data: data});

Select2 中的示例

var data = [
      { id: 0, text: 'enhancement' }, 
      { id: 1, text: 'bug' }, 
      { id: 2, text: 'duplicate' }, 
      { id: 3, text: 'invalid' }, 
      { id: 4, text: 'wontfix' }
];

$(".js-example-data-array").select2({
  data: data
});

<select class="js-example-data-array"></select>

【讨论】：

谢谢，但是我从 AJAX 收到 JSON，所以我需要在之前初始化 select2 并在之后填充...您可以编辑您的代码吗？
@jamesfray 使用 select2 的内置 ajax 函数填充您的选择怎么样？
我在其他检索 JSON 的 select2 中使用它。我的意图是用第一个 AJAX 搜索的 JSON 填充我的问题的 select2（对不起，我的英语不好）。除了填充（我得到这个 JSON 很好，但我不知道我能用这个填充第二个 select2 时，一切都很好）
如果你使用$('#selectElement').select2({data: data});，它也不起作用，数据是你的json对象吗？
不，不起作用。显示错误：当附加到选择元素时，select2 不允许使用选项数据

【解决方案2】：

我刚刚在 select2 列表中发布了一个类似的问题，然后又把头撞在墙上。这就是我想出的：（“破坏”是有帮助的提示）。首先我清空选择然后重置它。

    $("#id_category").on('change', function(){
           var cat = $(this).val();
           var url = '/breeds/lookup/?q='+cat;
           $.get(url, function(d){
               var idb = $("#id_breed").empty();
               idb.select2({data: d});
           }, "json");

        });

【讨论】：

感谢您的回复，但不起作用... :( 我很绝望（你可以把这个放在 Jsfiddle 上吗？很奇怪它对你有用

【解决方案3】：

    $('#selectElement').select2({
                minimumInputLength: 1,
                ajax: {
                    url: '@Url.Action("Search", "Home")',
                    dataType: 'json',
                    data: function(params) {
                return {
                    ad: params.term
                };
            },
            processResults: function(data) {
                return {
                    results: $.map(data, function(obj) {
                        return { id: obj.Id, text: obj.Ad + " " + obj.Soyad };
                    })
                };
            }
            });

【讨论】：

【解决方案4】：

如果您尝试默认显示带有预加载 JSON 的下拉菜单，那么当您单击字段时，您希望显示带有填充数据的下拉菜单，而无需输入单个字母，设置：

最小输入长度：0

并且像魅力一样工作。我希望这解决了你的问题，因为它解决了我的问题:)

【讨论】：