7

select2プラグインを使用してカスタム選択ドロップダウンを実装しようとしています選択し た値に、テキストではなく実際のオプション「値」のみを表示することは可能ですか?「オーストラリアドル」を選択した場合、選択したテキストには「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>
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

ドロップダウンには、実際にはテキストと値の 2 つの部分があります。テキストはユーザーの視点であり、値は開発者が使用するために使用されます。値を表示したい場合、エンドユーザーは表示された値が実際に何を意味するのかを理解できるはずだと思うので、このことを考慮して、テキストと値の両方を同じにすることをお勧めします（上記の値と同じ）。

于 2013-05-06T08:35:01.807 に答える