jquery - 使用带有 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 中删除，现在更简单了。

score 24 · Accepted Answer

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

initSelection: function (element, callback) {

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

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

score 15 · Accepted Answer

更新到新版本：

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

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

score 14 · Accepted Answer

拉维，对于 4.0.1-rc.1：

添加<option>里面的所有元素<select>。
在初始化函数$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

score 12 · Accepted Answer

一种非常奇怪的数据传递方式。我更喜欢从服务器获取 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>.

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

再见。

score 5 · Accepted Answer

我已添加

initSelection: function (element, callback) {

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

但是也

.select2('val', []);

在最后。

这解决了我的问题。

score 5 · Accepted Answer

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

score 1 · Accepted Answer

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 中已加载现有选项的数组。

score 1 · Accepted Answer

1

页面加载后更改值

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

于 2017-07-06T14:11:54.540 回答

score 0 · Accepted Answer

你可以使用以下

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

score 0 · Accepted Answer

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

 $("#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");

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

这些答案已经过时了。有些在某些情况下有效，但这是在文档中。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
        }
    });
});

jquery - 使用带有 Ajax 的 Select2 设置加载时的初始值

12 回答 12

Related

Reference