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

Posted 2023-02-24

【中文标题】如何在初始化了select2的输入框上设置默认值？

【英文标题】：How to set default value on an input box with select2 initialized on it?

【发布时间】：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); 然后我无法显示我的文本框的默认值：

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

【参考方案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");

参考：

https://select2.github.io/announcements-4.0.html https://github.com/select2/select2/issues/2086 http://jsfiddle.net/F46NA/7/

【参考方案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>