如何在初始化了select2的输入框上设置默认值？答案

【问题标题】：How to set default value on an input box with select2 initialized on it?如何在初始化了select2的输入框上设置默认值？
【发布时间】：2014-01-23 05:15:19
【问题描述】：

如何使用 select2 设置输入框的默认值？这是我的 HTML：

<input type="text" id="itemId0" value="Item no. 1">

还有我的javascript：

$("#itemId0").select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   
});

function productFormatResult(product) {
   var html = "<table><tr>";
   html += "<td>";
   html += product.itemName ;
   html += "</td></tr></table>";
   return html;
}

function productFormatSelection(product) {
    var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
    return selected + product.itemName;
}

问题来了：

如果我不将我的输入框初始化为select2 框，我可以显示我的输入框的默认值，即“Item no. 1”：

但是当我用select2 初始化它时，例如。 $("#itemId0").select2({code here}); 然后我无法显示我的文本框的默认值：

请问有谁知道如何显示默认值？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要使用 Select2 文档中描述的 initSelection 方法。

来自documentation：

在创建 Select2 时调用，以允许用户根据 select2 附加到的元素的值来初始化选择。

在您的情况下，请查看 Loading Remote Data 示例，因为它展示了如何将其与 AJAX 请求结合起来。

我希望这会有所帮助。

【讨论】：

感谢@dSquared 的回答，尝试解决这个问题，但目前我遇到了困难，因为它给了我一个未定义的文本而不是我的项目名称试图显示。我刚刚复制了单值选择项的文档中的内容。我想问题是回调。我会尝试解决它:) 我会发布另一个问题，以防我无法让它工作，无论如何非常感谢您的时间。它确实有帮助！祝你有美好的一天
@Fdr：那么有什么替代方案？
这些都不适用于多选。我使用所有选定的选项为选择提供服务，但它们没有显示任何文本。
新版本加载远程数据的文档可以在这里找到：select2.org/programmatic-control/…

【解决方案2】：

使用 initSelection 的旧初始选择

过去，Select2 需要一个名为 initSelection 的选项，该选项是每当使用自定义数据源时定义，允许要确定的组件的初始选择。这已经替换为数据适配器上的 current 方法。

{
  initSelection : function (element, callback) {
    var data = [];
    $(element.val()).each(function () {
      data.push({id: this, text: this});
    });
    callback(data);
  }
}

你也可以使用设置值。

你应该直接在底层元素上调用 .val 反而。如果你需要第二个参数（triggerChange），你还应该在元素上调用 .trigger("change")。

$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");

参考：

【讨论】：

【解决方案3】：

如果您有一个输入元素，请按如下方式声明它。记住也要填充值字段。

<input type="hidden" name="player" id="player" data-init-text="bla bla" value="bla bla" >

编写一个initSelection函数

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

确保此回调与 ajax 调用返回的键值对相同。

callback({"text":elementText,"id":elementText});

我注意到，将 value 字段保持为空会默认将输入保持为空，因此请记住也要填充它。

【讨论】：

谢谢！略短：$(element).data('init-text');

【解决方案4】：

方法initSelection不能有空值属性才能正常工作。

那是我的问题。

希望这会对某人有所帮助。

【讨论】：

谢谢！这是一个出乎意料的行为，也让我发疯。它应该调用 initSelection 不管你的标签的 value 属性，只是让你的代码处理它，但由于某种原因，如果你不给它至少一个虚拟的“值”在你的标签。

【解决方案5】：

您只需将所选选项的 id 放入选择输入的数据属性中即可轻松更改选择输入的值。然后在javascript中

var select =  $('.select');
var data   =  $(select).data('val');

$(select).val(data);

然后在您的选择输入上初始化 select2

$(select).select2();

这是小提琴https://jsfiddle.net/zeeshanu/ozxo0wye/

【讨论】：

【解决方案6】：

你不需要 ajax 或 json，你只需要把 SELETED 标签放到你的 OPTION 中，SELECT2 就会显示初始化值。

【讨论】：

选中和选项？？ <input type="text" id="itemId0" value="Item no. 1">

【解决方案7】：

这对我有用：'将默认值添加到数组的头部'

data.unshift({'id':-1, 'name':'xxx'});

$('#id_xxx).select2({
      placeholder: '--- SELECT ---',
      data: data,
      allowClear: true,
      width: '100%'
});

但是，官方文档说：

You can set default options by calling $.fn.select2.defaults.set("key", "value").

虽然没有例子。

【讨论】：

【解决方案8】：

我找到了极其简单的解决方案。

您必须传递默认选项的 ID 和 Name 并将其像 HTML 一样插入到

  var html = ' <option value="defaultID">defaultName</option>';
    $(".js-example-basic-single").html(html);

如何获取defaultID 或defaultName 取决于您的代码。例如，在 ASP .Net MVC 中，您可以这样做

<select id="PersonalID" class="js-example-basic-single form-control form-control-sm" name="PersonalID">
     <option value="@Model.PersonalID">@ViewBag.PersonalInfo</option>
</select>

【讨论】：

【解决方案9】：

我在这个特定配置中使用了另一种方法： - 多个=“多个” - 在用户搜索时从 AJAX 填充

$("#UserID").select2({
                placeholder: 'Input user name',
                "language": {
                    "noResults": function () {
                        return "Sorry, bro!";
                    }
                },
                dropdownParent: $("#UserID").parent(), 
                ajax: {
                    delay: 200,
                    url: '@Url.Action("GetUserAsJSON", "AppEmail")',
                    cache: true,
                    dataType: 'json',
                    data: function (params) {
                        var query = {
                            search: params.term,
                            page: params.page || 1
                        };
                        // Query parameters will be ?search=[term]&page=[page]
                        return query;
                    }
                }
            });

有几个步骤可以让我的解决方案发挥作用

1) 将每个添加的值保存在一个全局数组中。

var selectedIDs = new Array();

$("#UserID").on('change', function (e) {             
   //this returns all the selected item
   selectedIDs = $(this).val();                 
});

2) 所以当你保存数据时，你总是有selectedIDs 数组。

3) 当您刷新/加载网页时，只需使用保存的数据填充 selectedIDs，以便以后从一只手重新保存/编辑，从另一只手填充 select2 对象

在我的 ASP MVC 情况下，它看起来像这样，但您可以使用 JQuery 将 <option> 插入到 <select>。

<select id="UserID" class="js-example-basic-multiple form-control border" name="UserID" style="width:100%!important;" multiple="multiple">
foreach (var item in Model.ToUsers)
{
   <option selected="selected" id="@item.ID" value="@item.ID">@item.Value</option>
 }
</select>

【讨论】：