Différente de la valeur d'affichage pour sélectionnez le texte à l'aide de select2.js

Essaie de mettre en place un personnalisé, sélectionnez le menu déroulant à l'aide de select2 plugin
Est-il possible d'avoir la valeur sélectionnée pour afficher uniquement l'option réelle "valeur" à la place du texte, donc si j'ai choisi 'Australian Dollar", le texte sélectionné ne doit affichage 'AUD'

Mon mark-up ressemble à quelque chose comme ceci:

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

OriginalL'auteur calebo | 2013-05-06

  1. 4

    Simplement utiliser le formatSelection option. Il fournit le texte et la valeur de l'option sélectionnée et fixe la sélection du texte.

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

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

    Violon

    OriginalL'auteur netAction

  2. 6

    La version 4 de Sélectionner 2 utilise templateSelection au lieu de 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 + ')';
    }
});

    OriginalL'auteur Mage2.PRO

  3. 0

    Vous pouvez essayer ce 

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

    OriginalL'auteur Spokey

  4. 0

    Déroulant a en fait deux parties d'un Texte est l'une et l'autre est la Valeur. Le texte est pour le point de vue des utilisateurs et de la Valeur est utilisée par le développeur pour son utilisation. Si vous souhaitez afficher la valeur alors que je pense que votre utilisateur final devrait être en mesure d'obtenir ce qui en fait la valeur affichée moyens, avec cette considération ce que je vous suggère est d'avoir à la fois du Texte et de la Valeur que même seul(comme celle de la valeur ci-dessus).

    OriginalL'auteur Prashant

  5. 0

    Même les plus difficiles, cette question a été ici pendant un certain temps et probablement surmonter, j'ai eu le même doute et je pense que je devrais partager ce que j'ai.

    @Spokey réponse est très bonne, et les œuvres. Toutefois, il ne fonctionne que si vous faites une simple sélection. Si vous voulez faire une sélection multiple de la boîte, la chose va être un peu plus difficile, comme Select2 ne fournit aucun attribut unique pour trouvez facilement chaque option sélectionnée.

    Lecture @lien Hypertexte réponse, j'ai changé la façon de penser et a finalement obtenu un travail conséquent. Il serait un peu difficile si vous voulez vraiment passer juste la valeur affichée, j'ai perdu quelques heures à essayer de le faire. Mais avoir une nouvelle approche de ce genre, les choses devient plus facile:

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

    Venez d'ajouter ce que la valeur réelle du texte, qui ne sera probablement pas faire une grande différence pour l'utilisateur, mais pour nous, cela va nous aider beaucoup.
    La principale différence de l'autre réponse, javascript, est le 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);
 })

    ici

    OriginalL'auteur Patrick Bard