淘汰赛中带有图标的下拉菜单

Question

是否有任何可能的方法可以为每个单独的选项值创建一个具有与 fontawesome 不同的图标的下拉菜单？或者我可以更改每个值的背景颜色吗？我更喜欢 fontawesome 中的圆形图标，我可以在其中更改列表中每条记录的颜色。

我尝试在html部分添加一个Icon的Fontawesomecode

<select data-bind="options: someList, optionsText: 'dropdownItemName', optionsValue: 'dropdownItemId', value: selectedSomeList, optionsCaption: ''" style="font-family: FontAwesome">&#xf111;</select>

我也尝试将它添加到 <i></i> 标记中，但它什么也没做。

有人有想法吗？谢谢你的帮助

Answer 1

您可以在optionText 绑定中为图标添加Unicode（在 font-awesome 的网站上为每个图标指定了 Unicode 值）：

var viewModel = function() {
  
  this.values = ko.observableArray([{
    text: 'address-book \uf2b9',
    value: 1
  }, {
    text: 'bookmark \uf02e',
    value: 2
  }, {
    text: 'location-arrow \uf124',
    value: 3
  }]);
  
  this.selectedValue = ko.observable(2);
}

ko.applyBindings(new viewModel());

select {
  font-family: 'FontAwesome', 'Second Font name'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<select data-bind="options: values, 
                  optionsText: 'text', 
                  optionsValue: 'value', 
                  value: selectedValue">
</select>

（我从this answer借用了这个想法。但是，它显示为而不是图标。花了一段时间才弄清楚）

Answer 2

我可能会迟到。但是试试这个。 jsfiddle

var viewModel = function() {
  
  this.values = ko.observableArray([{
    text: 'Visa',
    value: 1,
    icon:'fa-cc-visa'
  }, {
    text: 'Discover',
    value: 2,
    icon:'fa-cc-discover'
  }, {
    text: 'Amex',
    value: 3,
    icon:'fa-cc-amex'
  }]);
  
  OptionsAfterRender = (option, item) => {
        
        ko.applyBindingsToNode(option, { css:  item.icon }, item);
    };
  
  
  this.selectedValue = ko.observable(2);
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<select style="font-family:fontAwesome" multiple="multiple" size="3" data-bind="options: values, 
                  optionsText: 'text', 
                  optionsValue: 'value', 
                  value: selectedValue,
                  optionsAfterRender:OptionsAfterRender">
</select>