Question

我正在动态构建html并将其附加到HTML select标签

这是我的代码

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);

我的要求是，如果选项值为“其他”，我想以单独的颜色显示

这是我的小提琴

请你告诉我如何实现这个

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

Answer 1

工作小提琴：http://jsfiddle.net/o9suqu0y/1/

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

Answer 2

您可以使用jquery添加css。检查是否使用jquery选择了该选项，如果不是，则可以添加css属性。

<强> CSS

.color{
color:#0F0F0F;
}

<强> JQuery的

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

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

这样，您只能将类添加到未选中的元素

Answer 3

试试这个 -

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')
    }
})
})

简单编辑@Rajan给出的答案。归功于他。

如何在select标签内更改Option名称的颜色？

3 个答案: