Based on the value of an option would that be possible to add a class to an option?

So if i have this:

   <select class="rubrique" name="ctl00">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="1">1</option>
    </select>

i'll get that:

<select class="rubrique" name="ctl00">
        <option class="" value="" selected="selected"></option>
        <option class="1" value="1">1</option>
        <option class="2" value="1">1</option>
        </select>

Based on the value of an option would that be possible to add a class to an option?

So if i have this:

   <select class="rubrique" name="ctl00">
    <option value="" selected="selected"></option>
    <option value="1">1</option>
    <option value="1">1</option>
    </select>

i'll get that:

<select class="rubrique" name="ctl00">
        <option class="" value="" selected="selected"></option>
        <option class="1" value="1">1</option>
        <option class="2" value="1">1</option>
        </select>

• javascript
• jquery

4 Answers 4

Yes, very easily, using the callback signature of addClass:

$('.rubrique option').addClass(function() {
    return this.value;
});

$('.rubrique > option').each(function(){
    $(this).addClass($(this).val());
});

Edit: I am not sure if .val() is 100% correct here, you could also use this:

$('.rubrique > option').each(function(){
    $(this).addClass($(this).attr('value'));
});

Easiest way to add class to an option:

$("#IdOfSelect  option[value='" + valueOfSelect + "']").addClass('hidden');

If it's the purpose to style a particular option element, you could consider this approach as well:

.rubrique option[value="2"]{
     background: yellow;
}