javascript 使用 select2.js 选择文本的不同显示值

Different display value for selecte text using select2.js

提问by calebo

Trying to implement a custom select dropdown using select2 pluginIs 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'

尝试使用select2 插件实现自定义选择下拉列表 是否可以让所选值仅显示实际选项“值”而不是文本，因此如果我选择了“澳元”，则所选文本应仅显示“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>

采纳答案by netAction

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

只需使用formatSelection选项。它提供所选选项的文本和值，并设置选择的文本。

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

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

Fiddle

小提琴

回答by Mage2.PRO

The version 4 of Select 2 uses templateSelectioninstead of formatSelection:
https://select2.github.io/announcements-4.0.html#changed-templating
https://select2.github.io/options.html#templateSelection

Select 2 的第 4 版使用templateSelection而不是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 + ')';
    }
});

回答by Spokey

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

在这里测试

回答by Prashant

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

下拉实际上有两个部分，一个是文本，另一个是值。文本用于用户的观点，值由开发人员使用以供他/她使用。如果您想显示值，那么我认为您的最终用户应该能够获得实际显示值的含义，考虑到这一点，我建议您将文本和值都设置为相同（如上面的值）。

回答by Patrick Bard

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.

@Spokey 的回答非常好，并且有效。但是，它仅在您进行简单选择时才有效。如果你想制作一个多选框，事情会变得有点困难，因为 Select2 没有提供任何唯一的属性来轻松找到每个选择的选项。

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:

阅读@HyperLink 的回答，我改变了思路，终于得到了一个有效的结果。如果您真的只想传递要显示的值，那将有点困难，我已经浪费了几个小时试图这样做。但是有了这样的新方法，事情变得更容易了：

<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(){}):

只是在真实文本上添加了什么值，这对用户来说可能不会有太大的不同，但对我们来说，这将有很大帮助。另一个答案javascript的主要区别在于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

在这里试试