CODEWITHSUNDEEP
javascriptjquerycss
Andre
Andre

Reputation: 839

Change text color inside of select menu

I am trying to get the text "FOUND" by the Reg.Exp. to change color inside of a select menu, but not success, any better way to accomplish this:

<span style="padding-right:40px">
<select id="sel" name="sel">
<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Choose</option>

  <script type="text/javascript">
   $( document ).ready(function() {

     var myRegExp = /toy/i; /* this text I am trying to change color */
     var myText = 'This is a toy, from toys';

    if( myRegExp.test(myText) ) {
      myText.replace(/toy/ig, '<span class="green">$1</span>')
     }

   });
  </script>

  <option value="This is a toy, from toys" id="opt">
     This is a toy, from toys
  </option>

Thanks for looking!

Upvotes: 0

Views: 68

Answers (2)

This Guy
This Guy

Reputation: 1716

This is possible with css. No javascript is necessary. You have an ID declared on your option so use that ID to change the color of your text.

#opt { color: green; }

Take a look at this fiddle I made:

jsFiddle DEMO

Update:

Also, since you have an ID, you do not necessarily need a value specified...which means you could take out the text you have for value="This is a toy, from toys" as its not needed since you have it already written in between the option tag.

Updated fiddle

Upvotes: 1

talkhabi
talkhabi

Reputation: 2759

$(document).on("change","#sel",function(){
    $(this).find('option').css("color","");
    $(this).find('option:selected').css("color","green");
});

Upvotes: 0

Related Questions