Inna wyświetlana wartość dla zaznaczenia tekstu przy użyciu select2.js

Question

Próba zaimplementowania niestandardowego rozwijanego wyboru przy użyciu select2 plugin Czy jest możliwe, aby wybrana wartość wyświetlała tylko rzeczywistą opcję "wartość" zamiast tekstu, więc jeśli wybiorę " Dolar australijski”, wybrany tekst powinien wyświetlać tylko 'AUD'

Moja mark-up wygląda mniej więcej tak:

<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

Wystarczy użyć opcji formatSelection. Dostarcza tekst i wartość wybranej opcji oraz ustawia tekst zaznaczenia.

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

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

Fiddle

Answer 2

możesz spróbować tej

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

Zrzut w dół ma dwie części, z których jedna to Tekst, a druga to Wartość. Tekst jest dla punktu widzenia użytkownika, a wartość jest używana przez programistę do jego/jej użycia. Jeśli chcesz wyświetlić wartość, to myślę, że twój końcowy użytkownik powinien być w stanie uzyskać to, co faktycznie oznacza wyświetlana wartość, z tym uwzględnieniem, co zasugeruję ci, aby mieć zarówno tekst i wartość jako same tylko (jak wartość powyżej).

Answer 4

Nawet jeśli ta kwestia była tu przez jakiś czas i prawdopodobnie przezwyciężyła, miałem te same wątpliwości i myślę, że powinienem podzielić się tym, co mam.

@Spokey odpowiedź jest bardzo dobra i działa. Działa to jednak tylko wtedy, gdy dokonujesz prostego wyboru. Jeśli chcesz utworzyć pole wyboru wielokrotnego, sprawa stanie się nieco trudniejsza, ponieważ Select2 nie zapewnia żadnego unikalnego atrybutu, aby łatwo znaleźć każdą wybraną opcję.

Odczytanie odpowiedzi naHyperLink, zmieniłem sposób myślenia i wreszcie uzyskałem działający wynik. Byłoby trochę ciężko, jeśli naprawdę chcesz przekazać tylko wartość do pokazania, zmarnowałem kilka godzin próbując to zrobić. Ale o nowe podejście tak, wszystko staje się łatwiejsze:

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

Wystarczy dodany jaka wartość jest na prawdziwym tekstem, który prawdopodobnie nie będzie mieć duże znaczenie dla użytkownika, ale dla nas, to pomoże los. Główną różnicą od drugiej odpowiedzi javascript, jest 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

Wersja 4 Wybierz 2 wykorzystuje templateSelection zamiast 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 + ')'; 
    } 
});