Select2 Optionen, die sich von dem Wert unterscheiden, der zurückgegeben wird

Question

Ich habe eine Gruppe von Objekten (in JSON-Form), die eine ID und eine Beschreibung haben.

Ich brauche den Benutzer in der Lage sein, um die ID oder Beschreibung im Dropdown-Menü zu sehen, aber wenn sie die ID oder Beschreibung auswählen, muss die ID des Objekts zurückgegeben werden.

Ein Objekt sieht wie folgt aus:

{ 
"id": 100 
"name": "George Washington" 
"description": "The first president of the United States." 
} 

im Drop-down-Menü, ich möchte beide 100 und George Washington erscheinen. Wenn der Benutzer eine dieser Optionen auswählt, möchte ich 100 zurückgeben. Irgendwelche Gedanken darüber, wie man dieses Verhalten implementiert?

Answer 1

Sie können eine einfache Implementierung in dieser Geige finden: https://jsfiddle.net/2j8e5ugd/

im Grunde müssen Sie über die json iterieren und Daten in die Auswahlliste hinzuzufügen.

HTML

<select id='s1'> 

</select> 

Script

$(document).ready(function(){ 
    var data = [{ 
    "id": 100, 
    "name": "George Washington", 
    "description": "The first president of the United States." 
    },{ 
    "id": 101, 
    "name": "George Washington2", 
    "description": "The first president of the United States." 
    }] 
    //fetch your data in this data variable 
    for(var i = 0; i<data.length; i++){ 
     $('#s1').append($('<option>', {value:data[i].id, text:data[i].id})); 
    $('#s1').append($('<option>', {value:data[i].id, text:data[i].name})); 
    } 
}); 

Hoffe, dass es

hilft

Answer 2

Sie können die Daten an die select2 um Doppelelemente zu haben, um zu passieren zu ändern: die erste zeigt die ID und die zweite den Namen oder die Beschreibung, beide mit der gleichen ID.

var data = [{ 
 
    "id": 100, 
 
    "name": "George Washington", 
 
    "description": "The first president of the United States." 
 
}, { 
 
    "id": 101, 
 
    "name": "1111", 
 
    "description": "111111111111." 
 
}]; 
 

 
// convert your input data 
 
var result = []; 
 
data.forEach(function(obj, idx) { 
 
    result.push({id: obj.id, text: obj.id}) 
 
    result.push({id: obj.id, text: obj.name}); 
 
}); 
 

 
$(".js-example-data-array").select2({ 
 
    data: result 
 
}).on('change', function(e) { 
 
    console.log('Selected: ' + this.value); 
 
}).trigger('change')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css"> 
 
<script src="https://select2.github.io/dist/js/select2.full.js"></script> 
 

 
<select class="js-example-data-array"></select>