CODEWITHSUNDEEP
javascriptjquery
Andris
Andris

Reputation: 1442

Jquery how to change color of one word in select <option> box

Have select-option box with word Select and language names

If language name is not selected, then see word Select.

If I see word Select, on page load want to see the word Select in red color.

However it is not red. If I click on the box and navigates to some language name, then word Select becomes red. But I need it red if box is not clicked (on page load to pay user attention).

Here is example http://jsfiddle.net/z7264x9t/

And here is code

<select name="language" id="language">
<option id="red_color">Select</option>
<option value="en">English</option>
<option value="ru">Русский</option>
<option value="lv">Latviešu</option>
</select>

jquery

var language_check = $("#language").val();
if ( language_check == 'Select' ) {
$('#red_color').css('color', 'red');
}
else if ( language_check != 'Select' ) {
$('#red_color').css('color', 'green');
}

I suppose it is because red_color is id of <option>, not the word Select. But how to define id for the word Select?

Upvotes: 1

Views: 709

Answers (3)

nsthethunderbolt
nsthethunderbolt

Reputation: 2095

Try this: http://jsfiddle.net/z7264x9t/6/

   check();
function check(){
    var language_check = $("#language").val();
if ( language_check == 'Select' ) {
    $("#language").css({'border-color': 'red','color':'red'});
    $('#language option:first-child').css({'color':'red'});
    $('#language>option+option').css({'color':'black'});
}
else if ( language_check != 'Select' ) {
    $("#language").css({'border-color': 'black','color':'green'});
//    $("#language option:first-child").css({'color':'black'});
    $("#language option[value="+language_check+"]").css({'color':'green'});
}
}

$("#language").change(function(){
check();
});

Updated: http://jsfiddle.net/z7264x9t/6/

Upvotes: 1

Yaje
Yaje

Reputation: 2831

Try using jQuery blur()

DEMO

  $('#language').on('change',function(){
       $('#language').blur();
      $('#red_color').css('color', 'red');
    });

Reference : jQuery blur

Upvotes: 1

Przemysław Kaczmarczyk
Przemysław Kaczmarczyk

Reputation: 436

For example:

$('#language option').each(function(){
   if($(this).attr('value') == 'ru'){
      $(this).css('background-color', 'red');
   }
});

should work

Upvotes: 0

Related Questions