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

您可以为Unicode绑定中的图标添加optionText（为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>

在Knockout中带有图标的下拉菜单

2 个答案: