cancel
Showing results for 
Search instead for 
Did you mean: 

Custom UI: Highlight specific values in drop down

slyakh
Participant
0 Kudos

Are UI customization questions appropriate for this forum? I find knockoutjs difficult to grasp, so my question is rudimentary.

NOTE: "pavId" is an ID unique to each Product Attribute Value - so it's an excellent hook to use in templates to highlight specific values. Yes, I plan on outsourcing the list of IDs to a custom table and modifying the code to do a lookup instead of referring to a bunch IDs, but that's all after this proof of concept.

Checkbox values are easy to style based on pavId, because they are generated with a FOR loop and so the condition can be inserted right into the responsive template:

But drop downs are trickier. Although they show up as individual elements in the DOM (seen in browser inspector)

In HTML, they are actually (i think?) created with knockout's data-bind attribute in the <select> element:

In the browser inspector, I can see the pavId's for all the options, so I know the data is there:



So there has to be a way to generate the <option> elements, where some of them with certain pavId's will come in with an element ID (e.g. "SpecialValue") to differentiate them from the rest, like so:

I can then apply a style (on line 😎 to those distinct elements based on that element ID:



Can anyone point me in the right direction? I assume I need change the something in the data-bind attribute value?
Thank you!

Accepted Solutions (0)

Answers (0)