Select2 weitere Werte anzeigen

Question

Ich habe Select2 Drop-Down erstellt. Jetzt möchte ich Beschreibung, Stadt, Geschäft, etc. in dieser Drop-Down-Show nach Ländername hinzufügen. Wie kann ich den Namen, die Region, den Laden usw. des Landes hinzufügen?

(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); 

Answer 1

den Code überprüfen:

(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>

Es funktioniert nur für select2 Version 4+. Wenn Sie es mit früheren Versionen anstelle von usisng templateResult und templateSelection verwenden möchten, verwenden Sie formatResult und formatSelection.