Question

For example, if I have this HTML for a drop down menu:

<div data-role="fieldcontain">
    <label for="cars" class="ui-hidden-accessible">Select Seating Area</label>    
    <select id="cars" data-native-menu="false">
      <option class="myclass1" value="volvo">Volvo</option>
      <option class="myclass2" value="saab">Saab</option>
      <option class="myclass3" value="mercedes">Mercedes</option>
      <option class="myclass4" value="audi">Audi</option>
    </select>
</div>
​

I want my custom classes to be added to the corresponding LI elements of the resulting UL element. How would one go about doing it? Does jQuery Mobile provide this functionality out of the box?

Here’s a quick JSFiddle: http://jsfiddle.net/avQC6/1/

Answer 1

No this functionality is not provided out of the box. The way to do this would be something like the following:

$('[data-option-index=0]').addClass('myclass1');
$('[data-option-index=2]').addClass('myclass2');

I’m sure you could write a neater way to accomplish this. That is just the general idea.