Unterschiedlicher Anzeigewert für ausgewählten Text mit select2.js

Question

Versuch, ein benutzerdefiniertes Auswahldropdown mit select2 plugin zu implementieren Ist es möglich, den ausgewählten Wert anzuzeigen, nur die tatsächliche Option 'Wert' anstelle des Textes, also wenn ich ausgewählt habe ' Australischer Dollar‘, sollte der ausgewählte Text nur angezeigt werden 'AUD'

Meine mark-up sieht ungefähr so ​​aus:

<select name="convert-to" id="convert-to"> 
    <option value="AUD" data-currency="AUD">Australian Dollar</option> 
    <option value="USD" selected="selected">US Dollar</option> 
    <option value="JPY">Japanese Yen</option> 
    <option value="EUR">Euro</option> 
    <option value="GBP">British Pound</option> 
    <option value="CAD">Canadian Dollar</option> 
    <option value="HKD">Hong Kong Dollar</option> 
</select> 

Answer 1

einfach die Option formatSelection verwenden. Es bietet den Text und den Wert der ausgewählten Option und legt den Text der Auswahl fest.

function formatSelection(val) { 
    return val.id; 
} 

$('select').select2({ 
    formatSelection: formatSelection, 
    width: 300 
}); 

Fiddle

Answer 2

Sie können versuchen, diese

$('select').select2({ 
    width: 300 
}).change(function() { 
    $('a.select2-choice span').text($(this).val()); 
    // change select2 span to the selected value 
}).trigger('change'); 
    // trigger change the first time so the displayed text will change to value 

Test it here

Answer 3

Drop Down hat eigentlich zwei Teile ist Text und andere ist Wert. Text ist für den Benutzer Sicht und Wert wird von Entwickler für seine Verwendung verwendet. Wenn Sie Wert anzeigen möchten, wie ich denke, Ihr Endbenutzer sollte in der Lage sein zu bekommen, was tatsächlich der angezeigte Wert bedeutet, mit dieser Überlegung, was ich vorschlagen werde, ist Text und Wert nur als gleich (wie der Wert in oben)).

Answer 4

Sogar diese Frage ist seit einer Weile hier und wahrscheinlich überwunden, ich hatte die gleichen Zweifel und ich denke, ich sollte teilen, was ich habe.

@Spokey Antwort ist sehr gut und funktioniert. Es funktioniert jedoch nur, wenn Sie eine einfache Auswahl treffen. Wenn Sie eine Mehrfachauswahlbox erstellen möchten, wird die Sache etwas schwieriger, da Select2 kein eindeutiges Attribut zur Verfügung stellt, um die einzelnen Optionen einfach zu finden.

Lesen @HyperLink Antwort, änderte ich die Art zu denken und endlich ein funktionierendes Ergebnis. Es wäre etwas schwierig, wenn Sie wirklich nur den Wert überschreiten möchten, den ich Ihnen gezeigt habe. Ich habe ein paar Stunden damit verschwendet, das zu versuchen. Aber einen neuen Ansatz, wie diese hat, lässt sich viel einfacher:

<select name="convert-to" id="convert-to" multiple> 
    <option value="AUD">AUD - Australian Dollar</option> 
    <option value="USD">USD - US Dollar</option> 
    <option value="JPY">JPY - Japanese Yen</option> 
    <option value="EUR">EUR - Euro</option> 
    <option value="GBP">GBP - British Pound</option> 
    <option value="CAD">CAD - Canadian Dollar</option> 
    <option value="HKD">HKD - Hong Kong Dollar</option> 
</select> 

Gerade hinzugefügt, was den Wert auf dem realen Text ist, die wahrscheinlich keinen großen Unterschied für den Benutzer machen, aber für uns, wird es helfen, ein Menge. Der wesentliche Unterschied der anderen Antwort JavaScript aktivieren, ist die change(function(){}):

change(function() { 
var options = $('.select2-search-choice > div'); 
i = 1; 
Array.prototype.forEach.call(options, function(o) { 
    o.id = 'choice'+i;    // optional, creating ids to 
    i++;        // find it easily if you want 

    aux = o.textContent.split(" - "); // Divide value from text 
    o.textContent = aux[0];   // Get first part, i.e, value 
    console.log(aux); 
}) 

Try it here

Answer 5

Die Version 4 von Select 2 verwendet templateSelection statt formatSelection:
https://select2.github.io/announcements-4.0.html#changed-templating
https://select2.github.io/options.html#templateSelection

$element.select2({ 
    /** 
    * @param {Object} item 
    * @param {Boolean} item.disabled 
    * @param {HTMLOptionElement} item.element 
    * @param {String} item.id 
    * @param {Boolean} item.selected 
    * @param {String} item.text 
    * @returns {String} 
    */ 
    templateSelection: function(item) { 
     /** @type {jQuery} HTMLOptionElement */ 
     var $option = $(item.element); 
     var $optGroup = $option.parent(); 
     return $optGroup.attr('label') + ' (' + item.text + ')'; 
    } 
});