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

Question

尝试使用select2插件实现自定义选择下拉列表 是否可以让所选值仅显示实际选项'value'而不是文本,因此如果我选择'Australian Dollar',则所选文本应仅显示'AUD'

我的加价看起来像这样:

<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

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

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

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

小提琴

Answer 2

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 + ')';
    }
});