Select2显示更多值

我创建了select2下拉菜单。现在，我想在此下拉菜单中按国名添加说明，城市，商店等。如何添加国家城市名称，地区，商店等？Select2显示更多值

(function($) { 
     $(function() { 
      var isoCountries = [ 
       { id: 'QA', text: 'Qatar',}, 
       { id: 'CA', text: 'Canada'}, 
       { id: 'CN', text: 'China'}, 
       { id: 'DE', text: 'Germany'}, 
       { id: 'RU', text: 'Russia'}, 
       { id: 'IT', text: 'Italy'} 
      ]; 

      $("[name='market']").select2({ 
       placeholder: "Select a country", 
       data: isoCountries 
      }); 
     }); 
    })(jQuery);

来源

2017-04-13 Sakib

https://select2.github.io/examples.html#data-ajax 使用此选项，编辑选择2的查看HTML： 'formatSelection：功能（项目）{ 回报item.text +' '+ item.xxx; //一些其他属性 }' – lakshay

请参阅示例页面源代码（Ctrl + U）以查看额外数据显示在html中的select2 – lakshay

检查下面的代码：

(function($) { 
 
    var isoCountries = [ 
 
     { id: 'US', text: 'USA', description: 'New York'}, 
 
     { id: 'SP', text: 'Spain', description: 'Barcelona'} 
 
    ]; 
 

 
    $("[name='market']").select2({ 
 
     placeholder: "Select a country", 
 
     data: isoCountries, 
 
     templateResult: function(data){ 
 
      return $('<span>') 
 
      .html(data.text + ' - ') 
 
      .append($('<i>') 
 
      .html(data.description)); 
 
     }, 
 
     templateSelection: function(data){ 
 
      return $('<span>') 
 
      .html(data.text + ' - ') 
 
      .append($('<i>') 
 
      .html(data.description)); 
 
     } 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 

 
<select name="market" style="width:100%;"></select>

它仅适用于选择2 4.0以上的版本。如果您想使用它与以前的版本，而不是usisng templateResult和templateSelection使用formatResult和formatSelection。

来源

2017-04-19 16:32:08 Barcelonczyk

Select2显示更多值

回答

相关问题