使用带有 Ajax 的 Select2 设置加载时的初始值答案

【问题标题】：Setting initial values on load with Select2 with Ajax使用带有 Ajax 的 Select2 设置加载时的初始值
【发布时间】：2013-09-13 00:36:17
【问题描述】：

我使用 Ajax 设置了 select2 控件（有单个和多个）。我试图在页面加载时设置一些值，但是我无法让它工作。我的 select2 代码如下：

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Ajax 组合工作正常，仅在加载初始值时遇到问题。我在下面尝试了这段代码，但无法让它工作：

initSelection : function (element, callback) {
    var elementText = $(element).attr('data-initvalue');
    callback(elementText);
}

我的 php 中的 HTML 返回如下：

<input name='header[country]' class='ajaxselect'  data-initvalue='[{"id":"IN","name":"India"}]' data-placeholder='Select Country' value='' />

我看到值是从 php 填充的，只有我的 jquery 有问题。我在控件中的值显示为US | United States of America。我想我已经编辑了 select2 源，以便在不使用格式选项的情况下将这种格式作为默认格式。

谁能帮我填充默认值？提前致谢。

编辑：这个问题与 Select2 版本

【问题讨论】：

看initSelection选项
我曾尝试过但没有成功（请查看我的描述）。你觉得我做的有什么问题吗？你能帮我弄清楚吗？
试试callback(JSON.parse(elementText));
尝试将data-initvalue 替换为value 并在initSelection 中使用callback(JSON.parse(elementText));。
@user1983983 非常感谢。你的建议成功了。我替换了var elementText = JSON.parse($(element).val());，而不是更改回调。您没有将您的建议作为答案，因此我无法将您的答案标记为已接受，但我已投赞成票。

标签： jquery ajax jquery-select2

【解决方案1】：

也许这对你有用！这对我有用...

initSelection: function (element, callback) {

            callback({ id: 1, text: 'Text' });
}

检查代码是否正确拼写，我的问题在initSelection，我有initselection

【讨论】：

initSelection 在 Select2 4.0 中已弃用。这已被 数据适配器 上的 current 方法取代，并且仅在完整版本中可用。
@PaulT.Rawkeen 所以预先选择的能力已被弃用并变得更加混乱？什么？几个小时以来，我一直在尝试预先选择多个值，但从未在文档中看到过。这太荒谬了。
文档的一半“正在编写”无济于事。老实说，如果您还没有编写文档，那么该版本还没有准备好发布。

【解决方案2】：

更新到新版本：

从这里尝试这个解决方案http://jsfiddle.net/EE9RG/430/

$('#sel2').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});

【讨论】：

有没有办法在这个回调上添加if？
插件有问题，只添加第一个数组，其余的忽略
AJAX 调用没有发生。

【解决方案3】：

Ravi，用于 4.0.1-rc.1：

在<select> 中添加所有<option> 元素。
在select2 初始化函数之后调用$element.val(yourarray).trigger("change");。

HTML：

<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">
       <option value="1">tag 1</option>
       <option value="2">tag 2</option>
       <option value="3">tag 3</option>
 </select>

JS：

var $tagsControl = $("#Tags").select2({
        ajax: {
            url: '/Tags/Search',
            dataType: 'json',
            delay: 250,
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 2,
        maximumSelectionLength: 6
    });

    var data = [];
    var tags = $("#Tags option").each(function () {
        data.push($(this).val());
    });
    $tagsControl.val(data).trigger("change");

已报告此问题，但它仍然存在。 https://github.com/select2/select2/issues/3116#issuecomment-146568753

【讨论】：

注意：我也尝试不添加选项直接推送它，但它不起作用。您应该同时添加选项和推送 + 触发器
挣扎了 3 个小时才偶然发现这段甜蜜的代码。谢谢！

【解决方案4】：

一种非常奇怪的数据传递方式。我更喜欢从服务器获取 JSON 字符串/对象，然后分配值和东西。

无论如何，当你这样做 var elementText = $(element).attr('data-initvalue'); 时，你会得到这个 [{"id":"IN","name":"India"}]。这个结果你必须按照上面的建议解析它，这样你才能得到 id ("IN") 和 name("India") 的真实值。现在有两种场景，多选&单值Select2。

单值：

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

多选

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill'em
    }
});

现在是诀窍！就像 belov91 建议的那样，你必须把这个...

$(element).select2("val", []);

即使是单值或多值 Select2。另一方面请记住，您不能将 Select2 ajax 函数分配给 <select> 标记，它必须是 <input>。

希望对您（或某人）有所帮助。

再见。

【讨论】：

【解决方案5】：

您指定为initSelection 的函数以初始value 作为参数调用。因此，如果value 为空，则不会调用该函数。
当您指定 value='[{"id":"IN","name":"India"}]' 而不是 data-initvalue 时，将调用该函数并且可以初始化选择。

【讨论】：

我在使用 value 属性时遇到问题，因为即使是空白也会提交。我试图将其保留为空白并从 select2 参数中的 data-initvalue 动态拉取它，但这不起作用。有没有办法不定义 value 属性？
即使是空白也提交是什么意思？清除值时，会提交最初指定的值吗？
你的意思是initSelection？
它只显示空白或空

【解决方案6】：

我已经添加了

initSelection: function (element, callback) {

      callback({ id: 1, text: 'Text' });
}

还有

.select2('val', []);

在最后。

这解决了我的问题。

【讨论】：

时隔一年多的一个问题；为什么.select2('val', []) 部分是必需的？我有点懒得看源码了。
@Hkan 需要清除字段中的当前值。否则 select2 将附加值。

【解决方案7】：

var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

这适用于对页面中的多个部分使用相同视图的人，据说它对于在您的页面中自动设置默认值或更好地在编辑页面中的工作方式相同。

“FOR”遍历在 DOM 中已加载现有选项的数组。

【讨论】：

【解决方案8】：

页面加载后更改值

$('#data').val('').change();

【讨论】：

【解决方案9】：

你可以使用下面的

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);

【讨论】：

【解决方案10】：

在我的情况下，问题是渲染输出。所以如果 ajax 数据不存在，我使用默认文本。

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }

【讨论】：

【解决方案11】：

晚了:(但我认为这会解决你的问题。

 $("#controlId").val(SampleData [0].id).trigger("change");

数据绑定后

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");

【讨论】：

【解决方案12】：

这些答案已经过时了。有些在某些情况下有效，但这是在文档中。 https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

基本上您需要创建并附加选定的选项。

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

【讨论】：