Select2 initSelection预加载数据不显示

我使用select2将远程数据加载到select中，输入标记具有预加载的值属性，指向预选选项，当我加载页面时，它将显示select清除选项（x）在右侧，但数据不显示。Select2 initSelection预加载数据不显示

这是我的代码：

function FormatResult(Consig) { 
    return Consig.NomCon; 
} 

function FormatSelection(Consig) { 
    $('#strConNom').val(Consig.NomCon); 
    return Consig.NomCon; 
} 

$("#strCon").select2({ 
placeholder: "Search", 
minimumInputLength: 5, 
allowClear: true, 
ajax: { 
    url: "LoadData.asp", 
    dataType: 'jsonp', 
    data: function (term, page) { 
     return { 
      q: term, 
      CodCas: $('#strCas').val(), 
     }; 
    }, 
    results: function (data, page) { 
     return {results: data.ConsigNom}; 
    } 
}, 
initSelection: function(element, callback) { 
    var id=$(element).val(); 
    if (id!=="") { 
     $.ajax("LoadData.asp", { 
     dataType: 'jsonp', 
      data: { 
       CodCon: id, 
       CodCas: $('#strCas').val(), 
      }, 

     }).done(function(data) { 
     callback(data); 
     }); 
    } 
}, 
formatResult: FormatResult, 
formatSelection: FormatSelection, 
dropdownCssClass: "bigdrop", 
escapeMarkup: function (m) { return m; } 
});

我怎样才能解决呢？

来源

2013-03-23 user2200620

我有一个类似的问题，我通过在input元素的html中包含一个value属性来解决它，当然还有formatSelection和initSelection。

传入到select2的json有两个字段id和文本。

这里是我的js代码：

$("#contributorNameSearchId").select2({ 
     placeholder: "Select a contributor", 
     containerCssClass: "dropDown", 
     minimumInputLength: 3, 
     ajax: { 
      url: "getList?t=contributor", 
      dataType: 'json', 
      data: function (term, page) { 
       return { 
        term: term, // search term 
        page_limit: 10, 
       }; 
      }, 
      results: function (data, page) { 
       return {results: data}; 
      } 
     }, 
     allowClear: true, 
     formatSelection: function(data) { 
      return data.text; 
     }, 
     initSelection : function (element, callback) { 
      var obj= {id:1,text:'whatever value'}; 
      callback(obj); 
     } 
    });

和输入元素本身：

<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>

注意值属性的虚拟值。

还有你

callback(data);

需要data.something代替（尽管你FormatSelection似乎是确定）的机会。检查从LoadData.asp返回的数据。

我希望这有助于。

来源

2013-03-28 13:58:27 Bill

非常感谢！我在两行之间阅读，并没有输入虚拟值。对于我的情况，我有多个select2具有相同的initSelection：http://jsfiddle.net/loginet/L5mPx/ – 2014-02-26 22:57:38

请确保在您的initSelection函数中，LoadData.asp传递单个对象而不传递包含单个对象的数组。

错误：

[{"id": 5, "text":"myValue"}]

正确：

{"id": 5, "text":"myValue"}

这里是你的函数修改。

initSelection: function(element, callback) { 
    var id=$(element).val(); 
    if (id!=="") { 
     $.ajax("LoadData.asp", { 
     dataType: 'jsonp', 
      data: { 
       CodCon: id, 
       CodCas: $('#strCas').val(), 
      }, 

     }).done(function(data) { 
      callback(data[0]); 
     }); 
    } 
},

来源

2013-07-03 22:11:30

这对Yii工作。 – topher 2013-11-12 22:41:58

对于我来说，我不得不删除从初始设置的占位符选项 - 可能会为别人

来源

2014-03-06 10:36:37 Bodkins

当选择2完成装载写下面的代码

$(".ajax_select").select2("data", {"id": 5, "text": "Test"});

它将设置有用默认选择select2。

来源

2014-07-17 09:42:08

您的意思是'.select2（“val”，{“id”：5，“text”：“Test”}）' – Iftah 2014-08-03 14:35:13

预加载值use .select2（“val”，5）; 但动态数据使用上面的代码。 – 2014-08-04 03:54:45

不会使它成为可供选择的唯一选择吗？对于动态数据我会做两个数据（具有完整的选项值数组）和VAL与单个值来设置默认值： '$（“。ajx_select”）。select2（{data：[...] }）选择2（ 'VAL'，{...}）' – Iftah 2014-08-05 08:13:13

挣扎了很多之后，解决的办法是以下

注意，数据对象应该具有相同的密钥为您repoFormatSelection VAR数据= {ID：1，cardname： “废除”};

你会看到所有的答案“文本”，但它应该是相同的JSON变量

，一个更重要的事情，要确保你把值=“0”或者一些虚拟的价值在你的select2隐藏输入中

$("#myselect").select2({ 
    allowClear: true, 
    placeholder: "Search for a card", 
    minimumInputLength: 3, 
    ajax: { 
      url: "search.php", 
      dataType: 'json', 
      quietMillis: 250, 
      data: function (term, page) { 
       return { 
       q: term, // search term 
      }; 
     }, 
     results: function (data, page) { 
      return {results: data.items}; 
     }, 
     cache: true 
    }, 
    initSelection: function (element, callback) {    
     var data = {id: 1, cardname: "Abolish"}; 
     callback(data); 
    }, 
    formatResult: repoFormatResult, 
    formatSelection: repoFormatSelection, 
    escapeMarkup: function (m) { 
     return m; 
    } // we do not want to escape markup since we are displaying html in results 
}); 

    function repoFormatResult(card) { 
     var markup = '<div class="row-fluid">'; 

     if (card.cardimage != '') 
     { 
      markup += '<div class="span2" style="float:left; margin-right:10px"><a class="qtooltip" href="#" rel="' + card.cardimage + '" ><img src="' + card.cardimage + '" width="50px" /></a></div>'; 
     } 

     markup += '<strong>' + card.cardname + '</strong> <small>' + card.editionname + '</small>' 
     markup += '<div style="clear:both;"></div></div>'; 

     return markup; 
    } 

    function repoFormatSelection(card) { 
     return card.cardname; 
    }

来源

2014-12-28 12:49:02

Select2 initSelection预加载数据不显示

回答

相关问题