Question

（一般问题：需要在下拉项目中显示彩色图标（方块）。颜色是动态确定的，形状总是正方形。如果有更好的解决方案，请告诉我） < / p>

我需要在Dropdown中显示图标，但很难在其中放置图像（并且您无法在选项中放置I-tag），因此我使用了解决方法添加Font-Awesome（FA）Unicode图像。

我需要添加＆＃39; fa-square＆＃39;每个选项如下。根据下面的代码是

f0c8     -> &#xf0c8;

http://fontawesome.io/icon/square/

我的选项值是从数组动态生成的，我附加如下：

$.each(items, function(i, item) {
    $('#dropdown').append($('<option></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle));
});

但无论我做什么，Firefox都会显示以下Hash Image。我尝试过的事情：

1）使Select具有Font-Awesome字体系列

<select id="dropdown" style="font-family: 'Font-Awesome'">

（这是这里的建议，https://github.com/FortAwesome/Font-Awesome/issues/996）

2）使选项具有所有选项的fa类

$('#dropdown').append($('<option class="fa"></option>').val(item.itemID).html('&#xf0c8; ' + itemTitle));

Font-Awesome CSS已加载并在项目中可用。有什么想法吗？

Answer 1

我现在使用 Select2 插件进行下拉菜单。我能够通过使用Select2的templateResult / templateSelection格式化方法来实现这一目标。

$('#dropdown').select2(
                                    templateResult: format,
                                    templateSelection: format,
                                    escapeMarkup: function (m) {
                                            return m;
                                    }   
                                });

function format(option) {
    var color = $(option.element).attr('data-color');
    return '<i class="fa fa-square" style="color : ' + color + '"></i> ' + option.text;
};

请注意我在Option上的data-color attr，这允许在Select2的格式参考函数中进行检索，以确定单独的框颜色。

<option data-color="..."></option>

显示哈希图标的下拉选项中的字体 - 真棒Unicode图标

1 个答案: