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版本＆lt; 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：

在C:\Program Files (x86)\Microsoft DirectX SDK (June 2010)\Include C:\Program Files (x86)\Microsoft DirectX SDK (June 2010)\Lib\x86内添加所有<option>元素。
在<select>初始化函数后调用$element.val(yourarray).trigger("change");。

HTML：

select2

JS：

<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>

此问题已报告但仍处于打开状态。 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”）的真实值。现在有两种情况，多选和＆amp;单值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作为参数调用您指定为value的函数。因此，如果value为空，则不会调用该函数当您指定value='[{"id":"IN","name":"India"}]'而不是data-initvalue时，系统会调用该函数，并且可以初始化选择。

Answer 6

我添加了

initSelection: function (element, callback) {

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

但也

.select2('val', []);

最后。

这解决了我的问题。

Answer 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");

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

＆＃34; FOR＆＃34;浏览已经在DOM中加载的现有选项的数组。

Answer 8

在页面加载后更改值

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

Answer 9

您可以使用以下

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

Answer 10

在我的情况下问题是呈现输出..所以如果ajax数据还没有出现，我使用了默认文本。

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

Answer 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");

Answer 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
        }
    });
});

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

12 个答案: