如何更改选择标签内选项名称的颜色？

Question

I am dynamically constructing html and appending it to the HTML select tag

This is my code

var companies = ["ONE","TWO","THREE","OTHERS","TEN"];

var comapnieshtml = '<option value="" selected>All Companies</option>';
                for (var i = 0; i < companies.length; i++) {
                    comapnieshtml += '<option value="' + companies[i] + '">' + companies[i] + '</option>'
                }
                $("#companieslist").html(comapnieshtml);

My requirement is that if the option value is Others i want to display it in a separate color

This is my fiddle

Could you please let me know how to achive this

http://jsfiddle.net/jm9zp0pp/3/

Answer 1

Working Fiddle: http://jsfiddle.net/o9suqu0y/1/

$(function(){
    $("#companieslist").change(function(){
        if ($('#companieslist').val() == "OTHERS"){
            $("#companieslist").css('color','red')
        }
        else{
            $("#companieslist").css('color','black')
        }
    })
})

Answer 2

You can add css using jquery. Check if the option is selected using jquery, if not u can add css attribute.

CSS

.color{
color:#0F0F0F;
}

JQuery

    $('#mySelectBox option').each(function() {

        if(!$(this).is(':selected')){
            $(this).addClass(color);
        }
    }

This way you can add the class only to the elements which are not selected

Answer 3

Try this -

var companies = ["ONE","TWO","THREE","OTHERS","TEN"];

var comapnieshtml = '<option value="" selected>All Companies</option>';
            for (var i = 0; i < companies.length; i++) {

                if (companies[i]=="OTHERS")
                {comapnieshtml += '<option style="color:green" value="' + companies[i] + '">' + companies[i] + '</option>'}
                else
                {comapnieshtml += '<option style="color:black" value="' + companies[i] + '">' + companies[i] + '</option>'}
            }
            $("#companieslist").html(comapnieshtml);

$(function(){
$("#companieslist").change(function(){
    if ($('#companieslist').val() == "OTHERS"){
        $("#companieslist").css('color','green')
    }
    else{
        $("#companieslist").css('color','black')
    }
})
})

Simply edited the answer given by @Rajan. Credit goes to him.