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>

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

下拉应该像

<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绑定通常有一个逻辑测试，因此您可以决定要应用哪些类，但是您正在传递true，因此它将CSS类labelclass应用于每个选项。 / p>

如果要使用类显示红色或蓝色，请将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>

从后端传递所需信息到＆＃39; prod＆＃39;数据结构。

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

2 个答案: