javascript - 选择时不显示C#下拉列表项的颜色

这是一个ASP.NET应用程序，后面的代码带有C#。我可以将背景颜色添加到下拉列表项中，但是当我进行选择时，该颜色不会在Chrome或IE 11中持续存在。在IE 9中可以正常工作。

到目前为止，我做了什么(从另一个关于SO的问题得到的提示):

在我的DropDownList中添加了onchange="SelectedItemCLR(this);"。但是不确定现在该怎么做才能保持颜色不变。

SelectedItemCLR函数(来自SO中的另一个问题)如下所示:

/* Persist the color of the selected item */
function SelectedItemCLR(source)
{
    if (source.options[source.selectedIndex].value == "Yellow") {
        // ???
    }
    else if (source.options[source.selectedIndex].value == "Red") {
    }
    else if (source.options[source.selectedIndex].value == "Green") {
    }
}

这更多是我必须忍受的浏览器问题吗？ :(

编辑:
在服务器端C#代码中，我有此代码为项目着色。

foreach (ListItem item in ddlOverallStatus.Items)
{
    if (item.Value == "Red")
    {
        item.Attributes.Add("style", "padding:2px;background-color:#B22222;color:#fff");
    }
    else if (item.Value == "Yellow")
    {
        item.Attributes.Add("style", "padding:2px;background-color:yellow;color:#000");
    }
    else if (item.Value == "Green")
    {
        item.Attributes.Add("style", "padding:2px;background-color:green;color:#fff");
    }
}

在IE 9中可以正常工作



编辑-与Chrome兼容。

将onchange="SelectedItemCLR(this);添加到您的asp:DropDownList。

函数SelectedItemCLR看起来像:

function SelectedItemCLR(source)
{
	if (source.options[source.selectedIndex].value == "Yellow") {
		$('#<%=  ddlOverallStatus.ClientID %>').addClass("YellowDropdownListItem");
	}
	else if (source.options[source.selectedIndex].value == "Red") {
	}
	else if (source.options[source.selectedIndex].value == "Green") {
	}
	else {
	}
}

最佳答案

好的，它可以工作了。看看我的jsfiddle。 https://jsfiddle.net/fbou1srd/。

的HTML

<select id="dropDown" onchange="changeColor();">
    <option val="Red">Red</option>
    <option val="Yellow">Yellow</option>
    <option val="Green">Green</option>
</select>

的CSS

select option[val="Red"] {
    background-color: red;
}

select option[val="Yellow"] {
    background-color: yellow;
}

select option[val="Green"] {
    background-color: green;
}

JS

function changeColor() {
    var select = $("#dropDown");
    if(select.val() === "Red") {
        select.css("background-color", "Red");
    }
    else if(select.val() === "Yellow") {
        select.css("background-color", "Yellow");
    }
    else if(select.val() === "Green") {
        select.css("background-color", "Green");
    }
}