Jquery 一个选项有多个图像？

我正在使用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;
         }
     });
 });    

---

这是我来自JSFIDLE的代码。

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

数据foo属性如下所示：

data-foo="icon1;icon2;icon3"

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

格式函数如下所示：

data-foo="icon1;icon2;icon3"

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

---

如果您只添加更多的s，您将获得更多的图像，但每个选项将具有相同数量的图像。为每个图像使用多个data-*是否是一个好的解决方案？不确定目标是什么，但可以，您可以有任意多个data-*属性。每个选项有两个或三个图标。我只想使用一个data-*：在从$.eachstate.element.data'foo.split'；'进行编辑之后，functioni，图标为$.each$state.element.data'foo.split'；'，功能I，图标工作起来很有魅力。非常感谢！