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

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

和我的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 = ""; html += "
"; html += product.itemName ; html += "
"; return html; } function productFormatSelection(product) { var selected = ""; return selected + product.itemName; } 

这是问题：如果我不将输入框初始化为select2框，我可以显示输入框的默认值，即“项目编号1”， 但是当我用select2初始化它时，例如。 $("#itemId0").select2({code here}); 我不能显示我的文本框的默认值。 。

谁知道我怎么能显示默认值？

Answer 1

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

从文档 ：

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

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

编写initSelection函数

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

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

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

我注意到保持值字段为空将默认输入为空，所以请记住也填充它。

Answer 4

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

那是我的问题。

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

Answer 5

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

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

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

 $(select).select2(); 

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

Answer 6

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

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

但是没有例子。