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

Question

这是我的下拉列表

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

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

下拉应该像

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

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

Answer 1

css 绑定通常有一个逻辑测试，因此您可以决定应用哪些 class，但是您通过了 true，所以它应用了 CSS class labelclass 每个选项。

如果您想使用 classes 显示红色或蓝色，请将您的 HTML 标记更改为：

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

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

this.computedLabelClass = ko.pureComputed(function() {
    return <your logic test here> ? "redLabelClass" : "blueLabelClass";
});

Answer 2

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

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

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

Apply dynamic css styles to drop down list items in Oracle jet

javascript

css

knockout.js

oracle-jet