javascript - 如何在已初始化 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 框，我可以显示输入框的默认值“Item no. 1”:

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

谁知道如何显示默认值？

Answer 1

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

来自documentation :

Called when Select2 is created to allow the user to initialize the selection based on the value of the element select2 is attached to.

对于您的情况，请查看 Loading Remote Data示例，它展示了如何将其与 AJAX 请求合并。

我希望这会有所帮助。