Wie setze ich Daten- * aus Datenquellen in Select2?

Question

Ich verwende Select2 wie folgt:

$('select#fields').select2({ 
    placeholder: 'Select a field', 
    data: data.fields 
}); 

data.fields ist ein JSON wie diese:

"fields": [ 
    { 
    "id": "companies_id", 
    "text": "companies_id", 
    "data-type": "int" 
    }, 
    { 
    "id": "parent_companies_id", 
    "text": "parent_companies_id", 
    "data-type": "int" 
    }, 
    { 
    "id": "client_of_companies_id", 
    "text": "client_of_companies_id", 
    "data-type": "int" 
    }, 
    { 
    "id": "asset_locations_id", 
    "text": "asset_locations_id", 
    "data-type": "int" 
    }, 
    { 
    "id": "companies_name", 
    "text": "companies_name", 
    "data-type": "varchar" 
    }, 
    { 
    "id": "companies_number", 
    "text": "companies_number", 
    "data-type": "varchar" 
    } 
] 

id und text verwendet werden, um die Optionswerte zu füllen, kann ich den dritten Wert data-type und Setzen Sie es als Attribut für die <option>? Wenn das so ist, wie? Kann mir jemand ein Beispiel geben?

Answer 1

Eigentlich - select2 standardmäßig speichert alle Attribute in der data('data') Variable des Elements <option>, die es erstellt, und Sie können immer auf diese Werte zugreifen, die $(<option>).data('data') verwenden, halten jedoch daran, dass es ist nicht die gleiche wie .data('type') für data-type="value". Sie müssen den vollständigen Namen des Attributs verwenden.

Hier ist ein Beispiel dafür, wie der Wert von data-type auf select Ereignis zu erhalten:

var $example = $("#s1").select2({ 
 
    data: [ 
 
     { 
 
      "id": "companies_id", 
 
      "text": "companies_id", 
 
      "data-type": "int", 
 
      "data-extra": '1' 
 
     }, 
 
     { 
 
      "id": "parent_companies_id", 
 
      "text": "parent_companies_id", 
 
      "data-type": "int", 
 
      "data-extra": '2' 
 
     }, 
 
     { 
 
      "id": "client_of_companies_id", 
 
      "text": "client_of_companies_id", 
 
      "data-type": "int", 
 
      "data-extra": '3' 
 
     }, 
 
     { 
 
      "id": "asset_locations_id", 
 
      "text": "asset_locations_id", 
 
      "data-type": "int", 
 
      "data-extra": '4' 
 
     }, 
 
     { 
 
      "id": "companies_name", 
 
      "text": "companies_name", 
 
      "data-type": "varchar", 
 
      "data-extra": '5' 
 
     }, 
 
     { 
 
      "id": "companies_number", 
 
      "text": "companies_number", 
 
      "data-type": "varchar", 
 
      "data-extra": '6' 
 
     } 
 
    ], 
 
}).on('select2:select', function(e) { 
 
    console.log(e.params.data['data-type'], e.params.data['data-extra']); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script> 
 
<select id="s1"> 
 
</select>