3

这是我的下拉列表

<select id="productselect" aria-label="Single Select"      
        data-bind="ojComponent: {component: 'ojSelect', disabled: false,
                  value: productValue,optionChange: onChangeProduct,
                  rootAttributes: {style:'max-width:20em'}}">
   <!-- ko foreach: products -->
      <option data-bind="value:value, text:label, css:{labelclass:true}">   
      </option>    
   <!-- /ko -->
</select>

我想通过传递动态类为每个列表项应用不同的颜色，但不起作用。请帮忙。

下拉应该像

<option style = "color : red" data-bind="value:value, text:label">
<option style = "color : blue" data-bind="value:value, text:label">
and so on...

如何动态实现这种类型的下拉。

4

2 回答 2

1

绑定通常有一个逻辑测试，css因此您可以决定应用哪些类，但您正在通过true，因此它将 CSS 类labelclass应用于每个选项。

如果要使用类显示红色或蓝色，请将 HTML 标记更改为：

<option data-bind="value: value, text: label, css: computedLabelClass">

并更改您的 JavaScript 视图模型以添加：

this.computedLabelClass = ko.pureComputed(function() {
    return <your logic test here> ? "redLabelClass" : "blueLabelClass";
});
于 2018-02-04T21:37:04.443 回答
0

css 绑定不适用于上述类型的选择组件。我不得不使用这种类型，它按预期工作正常。

<ul id="prods" style="display: none" >
   <!-- ko foreach: prods -->
    <li data-bind="attr: {'oj-data-value': value}, style:
         {color:colorString}">
      <span data-bind="text: label"></span>
   </li>
  <!-- /ko -->
</ul>
<select id="prodselect" name="prod_names"
    data-bind="ojComponent: {component: 'ojSelect', disabled: true,
               renderMode: 'jet',list: 'prods', value: product,
               rootAttributes: {style:'max-width:100%'}}">
</select>

通过“prod”数据结构从后端传递所需信息。

于 2018-02-12T05:02:45.260 回答