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

Question

这是一个ASP。NET应用程序，在后面的代码中使用C#。我可以在下拉列表中添加背景颜色，但是当我选择时，颜色在Chrome或IE 11中不存在。在IE 9中工作正常。

到目前为止我做了什么(从so上的另一个问题得到提示):

将onchange="SelectedItemCLR（this）；"添加到我的DropDownList。但不知道现在该怎么做才能保留颜色。

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中工作正常

编辑 - 让它与铬一起工作。

> < Li > < p > Add < code > onchange = " SelectedItemCLR(this)；添加到asp:DropDownList。

函数SelectedItemCLR如下所示：

js prettyprint-override">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

您需要设计DropDownList本身的样式，而不仅仅是每个项目。

您可以使用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在客户端完成。

Answer 2

好了，开始工作了。看看我的工作小提琴。https://jsfiddle.net/fbou1srd/.

断续器

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