一个选项的多个图像？答案

【问题标题】：Multiple images for an option?一个选项的多个图像？
【发布时间】：2014-12-15 05:50:58
【问题描述】：

我正在使用 select2。我已经设法使用模板将图像添加到选项中。但是现在我想为每个选项添加一个以上的图像，并且无法弄清楚这样做的最佳解决方案是什么。

$(document).ready(function () {
     function format(state) {
         var originalOption = state.element;

         return state.text + "<img src='images/filters/" + $(originalOption).data('foo') + ".png'  width='30px' height='30px' />";
     }

     $('.consultant-select').select2({
         allowClear: true,
         maximumSelectionSize: 1,
         formatResult: format,
         formatSelection: format,
         escapeMarkup: function (m) {
             return m;
         }
     });
 });

这是我来自 jsfiddle http://jsfiddle.net/emilium/ctdk42xb/ 的代码。

【问题讨论】：

如果你只是添加更多<img>s，你会得到更多图像
但是每个选项将具有相同数量的图像。对每张图片使用多个 data-* 是不是一个好的解决方案？
不太确定目标是什么，但是是的，您可以拥有任意数量的 data-* 属性。
每个选项都有两个或三个图标。我只想使用一个数据-*。 (:

标签： jquery jquery-select2

【解决方案1】：

您可以使用分号来分隔图标的名称。

data-foo 属性如下所示：

data-foo="icon1;icon2;icon3"

format() 函数看起来像：

function format(state) {
    var text = state.text;
    $.each($(state.element).data('foo').split(';'), function(i, icon) {
        text += '<img src="images/filters/' + icon + '.png" width="30" height="30" />';
    }
    return text;
}

【讨论】：

在从$.each(state.element.data('foo').split(';'), function(i, icon) 编辑到$.each($(state.element).data('foo').split(';'), function(i, icon) 之后就像一个魅力。非常感谢！