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

Question

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

到目前为止我做了什么（从另一个关于 SO 的问题中得到提示）：

将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 一起使用。

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

2. 函数 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 {
	}
}

Answer 1

好的，开始工作了。查看我的工作 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");
    }
}

Answer 2

您需要设置 DropDownList 本身的样式，而不仅仅是每个 Item 。

您可以像这样使用 OnSelectedIndexChanged 事件来做到这一点：

<asp:DropDownList ID="ddlOverallStatus" AutoPostBack="true" OnSelectedIndexChanged="ddlOverallStatus_SelectedIndexChanged" runat="server"></asp:DropDownList>

然后在后面的代码中：

protected void ddlOverallStatus_SelectedIndexChanged(object sender, EventArgs e)
    {

        if (ddlOverallStatus.SelectedValue == "Red")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:#B22222;color:#fff");
        }
        else if (ddlOverallStatus.SelectedValue == "Yellow")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:yellow;color:#000");
        }
        else if (ddlOverallStatus.SelectedValue == "Green")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:green;color:#fff");
        }
    }

另一种选择是在客户端使用 Javascript。