将动态 CSS 样式应用于 Oracle jet 中的下拉列表项答案

【问题标题】：Apply dynamic css styles to drop down list items in Oracle jet将动态 CSS 样式应用于 Oracle jet 中的下拉列表项
【发布时间】：2018-07-13 23:17:42
【问题描述】：

这是我的下拉列表

<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...

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

【问题讨论】：

您是否看到任何错误？ jsfiddle 可以帮助我们更好地解决问题
没有。我没有收到任何错误。我正在使用 Oracle jet。

标签： javascript css knockout.js oracle-jet

【解决方案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";
});

【讨论】：

【解决方案2】：

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”数据结构从后端传递所需信息。

【讨论】：