如何在输入框上设置默认值,并在其上初始化select2

Question

如何使用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框,我可以显示输入框的默认值"项目编号1", 但是当我用select2初始化它时,例如.$("#itemId0").select2({code here});我不能显示我的文本框的默认值..

任何人都知道如何显示默认值？

Answer 1

您需要使用initSelectionSelect2文档中描述的方法.

从文档:

创建Select2时调用,以允许用户根据元素select2的值附加初始化选择.

在您的情况下,请查看" 加载远程数据"示例,因为它显示了如何将其与AJAX请求结合使用.

我希望这有帮助.

Answer 2

使用initSelection进行旧的初始选择

过去,Select2需要一个名为initSelection的选项,该选项在使用自定义数据源时定义,允许确定组件的初始选择.这已被数据适配器上的当前方法所取代.

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

Answer 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 字段为空默认情况下将保持输入为空，因此请记住填充它。