Different display value for selecte text using select2.js

Question

Trying to implement a custom select dropdown using select2 plugin Is it possible to have the selected value to display only the actual option 'value' instead of the text, so if I selected 'Australian Dollar', the selected text should only display 'AUD'

My mark-up looks something like this:

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

Flummox

Answer 1

Simply use the formatSelection option. It provides the text and value of the selected option and sets the selection's text.

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

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

Fiddle

Keyte

Answer 2

The version 4 of Select 2 uses templateSelection instead of 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 + ')';
    }
});

Chud

Answer 3

You can try this

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

Cyclo

Answer 4

Drop down actually has two parts one is Text and other is Value. Text is for user point of view and Value is used by developer for his/her use. If you want to display value then as I think your end user should be able to get what actually the displayed value means, with this consideration what I will suggest you is to have both Text and Value as same only(as that of value in above).

Acro

Answer 5

Even tough this question has been here for a while and probably overcome, I had the same doubt and I think I should share what I've got.

@Spokey answer is very good, and works. However it only works if you are making a simple selection. If you want to make a multiple selection box, thing will get a bit more difficult, as Select2 does not provide any unique attribute to easily find each option selected.

Reading @HyperLink answer, I changed the way of thinking and finally got an working result. It would be kind of hard if you really want to pass just the value to be shown, I've wasted a couple of hours trying to do that. But having a new approach like this, things gets easier:

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

Just added what the value is on the real text, which will probably not make a big difference to the user, but for us, it will help a lot. The main difference of the other answer javascript, is the 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

Wad