Select2 显示更多值

Question

我创建了 select2 drop-down。现在我想在此 drop-down 显示中按国家/地区名称添加描述、城市、商店等。如何添加国家城市名称、地区、商店等？

    (function($) {
        $(function() {
            var isoCountries = [
                { id: 'QA', text: 'Qatar',},
                { id: 'CA', text: 'Canada'},
                { id: 'CN', text: 'China'},
                { id: 'DE', text: 'Germany'},
                { id: 'RU', text: 'Russia'},
                { id: 'IT', text: 'Italy'}
            ];

            $("[name='market']").select2({
                placeholder: "Select a country",
                data: isoCountries
            });
        }); 
    })(jQuery);

Answer 1

检查下面的代码：

(function($) {
    var isoCountries = [
        { id: 'US', text: 'USA', description: 'New York'},
        { id: 'SP', text: 'Spain', description: 'Barcelona'}
    ];

    $("[name='market']").select2({
        placeholder: "Select a country",
        data: isoCountries,
        templateResult: function(data){
          return $('<span>')
            .html(data.text + ' - ')
            .append($('<i>')
            .html(data.description));
        },
        templateSelection: function(data){
          return $('<span>')
            .html(data.text + ' - ')
            .append($('<i>')
            .html(data.description));
        }
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

<select name="market" style="width:100%;"></select>

它仅适用于 select2 版本 4+。如果你想将它与以前的版本一起使用，而不是使用 templateResult 和 templateSelection，请使用 formatResult 和 formatSelection。

Select2 显示更多值

Select2 show more values

jquery

jquery-select2

select2