Question

尝试使用select2 plugin实施自定义选择下拉菜单是否可以让所选值仅显示实际选项'值'而不是文本，因此如果我选择'澳元'，则所选文本应仅显示'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

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

Answer 2

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

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

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

Fiddle

Answer 3

你可以试试这个

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

下拉实际上有两个部分，一个是Text，另一个是Value。文本用于用户的观点，开发人员使用Value来供他/她使用。如果你想显示值，那么我认为你的最终用户应该能够得到实际显示的值意味着什么，考虑到这一点，我建议你只有Text和Value相同（如上面的值））。

Answer 5

即使这个问题已经存在了一段时间并且可能已经克服，我也有同样的疑问，我认为我应该分享我所拥有的。

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

阅读@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>

刚刚添加了真实文本的值，这可能不会对用户产生很大的影响，但对我们来说，它会有很大帮助。其他答案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

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

5 个答案: