使用Ajax使用Select2设置加载时的初始值

Question

我有使用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版本<4.0有关.此选项已从v4.0中删除,现在更加简单.

Answer 1

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

initSelection: function (element, callback) {

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

检查一下代码是否拼写正确,我的问题出在了initSelection,我有initselection

Answer 2

更新到新版本:

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

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

Answer 3

Ravi,4.0.1-rc.1:

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

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

Answer 4

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

无论如何,当你这样做时,var elementText = $(element).attr('data-initvalue');你就会得到这个[{"id":"IN","name":"India"}].结果你必须按照上面的建议PARSE它,这样你就可以获得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>.

希望能帮助你(或某人).

再见.

Answer 5

initSelection使用initial valueas参数调用您指定的函数.因此,如果value为空,则不调用该函数.
当你指定value='[{"id":"IN","name":"India"}]'而不是data-initvalue函数被调用时,选择可以被初始化.

Answer 6

我加了

initSelection: function (element, callback) {

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

但是也

.select2('val', []);

在最后。

这解决了我的问题。