CODEWITHSUNDEEP
jquerydrop-down-menu
john
john

Reputation: 1273

how to change text color of a particular word in a selectbox with jquery

I have a selectbox with a couple of values. One of these values id Offside. The text offside should always be colored red.( i use text-danger class from bootstrap to color it red)

<select>
  <option class="blog-category" value="Offside" selected>Offside</option>
  <option class="blog-category" value="Apple" >Apple</option>
  <option class="blog-category" value="Banana" >Banana</option>
  <option class="blog-category" value="Peach" >Peach</option>
  <option class="blog-category" value="Orange" >Orange</option>
  <option class="blog-category" value="Offside" >Offside</option>
</select>

I already did that with jquery like below:

$(".blog-category:contains(Offside)").addClass('text-danger');

Now what i want to achieve: if Offside is selected, make the selected text also red. If another value is selected, do NOT make it red!

This is my fiddle: https://jsfiddle.net/jyut4xgk/4/

How can i achieve this?

Upvotes: 1

Views: 72

Answers (1)

Jack Maessen
Jack Maessen

Reputation: 1864

Add a class to the select where we can trigger on:

<select class="category">
  <option class="blog-category" value="Offside" selected>Offside</option>
  <option class="blog-category" value="Apple" >Apple</option>
  <option class="blog-category" value="Banana" >Banana</option>
  <option class="blog-category" value="Peach" >Peach</option>
  <option class="blog-category" value="Orange" >Orange</option>
  <option class="blog-category" value="Offside" >Offside</option>
</select>
<br /><br />
<select class="category">
  <option class="blog-category" value="Apple" selected>Apple</option>
  <option class="blog-category" value="Apple" >Apple</option>
  <option class="blog-category" value="Banana" >Banana</option>
  <option class="blog-category" value="Peach" >Peach</option>
  <option class="blog-category" value="Orange" >Orange</option>
  <option class="blog-category" value="Offside" >Offside</option>
</select>

Now in your js:

$(".blog-category:contains(Offside)").addClass('text-danger');

$('.category option:selected:contains(Offside)').closest('select').addClass('text-danger');

Fiddle

Upvotes: 1

Related Questions