7

尝试使用select2 插件实现自定义选择下拉菜单 是否可以让所选值仅显示实际选项“值”而不是文本，因此如果我选择“澳元”，则所选文本应仅显示“澳元”

我的标记看起来像这样：

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

5 回答 5

7

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

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

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

小提琴

于 2014-07-30T17:23:41.943 回答
6

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 + ')';
    }
});
于 2015-11-28T13:35:07.127 回答
0

你可以试试这个

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

在这里测试

于 2013-05-06T08:32:32.600 回答
0

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

于 2013-05-06T08:35:01.807 回答
0

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

@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);
 })

在这里试试

于 2014-02-13T06:49:04.767 回答