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

Question

Here is my drop down list

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

I would like to apply different colors to each list item by passing dynamic class, but not working. Please help.

Drop-down should be like

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

How to achieve this type of drop-down dynamically.

Are you seeing any error? a jsfiddle would help us better to fix the issue — G_S, Feb 04 '18 at 05:24
No. I am not getting any error. I am doing it using Oracle jet. — Techie, Feb 04 '18 at 05:58

score 1 · Answer 1 · answered Feb 04 '18 at 21:37

The css binding usually has a logic test so you can decide which classes to apply, but you are passing true, so it's applying the CSS class labelclass to every option.

If you want to show either red or blue using classes, change your HTML markup to:

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

And change your JavaScript view model to add:

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

score 0 · Accepted Answer · answered Feb 12 '18 at 05:02

css binding is not working for above type of select component. I had to go with this type and it is working fine as expected.

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

Passing required information from back end through 'prod' data structure.

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

2 Answers2