javascript - knockout 中带有图标的下拉菜单

Question

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

我尝试在html部分添加图标的Fontawesomecode

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

我还尝试将其添加到 <i></i> 中标签，但它什么也不做。

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

Answer 1

您可以在 optionText 绑定(bind)中为图标添加 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 的想法。但是，它显示为  而不是图标。花了一段时间才弄清楚)