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

Posted 2023-02-21

【中文标题】选择时不显示 C# 下拉列表项颜色

【英文标题】：C# dropdown list item color doesn't display when selected

【发布时间】：2016-02-10 13:18:02

【问题描述】：

这是一个带有 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 一起使用。

将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 
	

【问题讨论】：

你想让它在什么之间持续存在？浏览器重启？页面变化？只是过去被点击了吗？

你问用javascript写什么来改变组合框的背景为选定的颜色？如果是这样，我希望您需要修改 source 的样式（背景颜色）。

对不起，我应该清楚的。就在用户进行选择时，背景颜色会丢失。

我建议为您的下拉列表创建一个 CSS 类并在那里进行着色。请查看***.com/questions/12836227/… 以帮助您入门。

我的意思是你不应该通过代码应用 css。您应该在样式表中实现它，然后让下拉列表继承该类。这就是样式表的用途。

【参考方案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");
    

【讨论】：

但是，如果您处于 C#、ASP .NET 世界中，则需要对上面 John 的代码稍作修改。请看我上面的编辑。

绝对！非常感谢您的宝贵时间。

【参考方案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。

【讨论】：

这将在每次用户更改下拉选择时发送一个 HTTP 请求:(