CODEWITHSUNDEEP
javascriptjquery
user472285
user472285

Reputation: 2674

add class to option in 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>

Upvotes: 6

Views: 44507

Answers (4)

Rohil Patel
Rohil Patel

Reputation: 468

Easiest way to add class to an option:

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

Upvotes: 1

cptstarling
cptstarling

Reputation: 779

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

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

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237817

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

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

Upvotes: 9

Damb
Damb

Reputation: 14600

$('.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'));
});

Upvotes: 2

Related Questions