Question

这是一个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如下所示：

＆＃13;

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 {
	}
}

＆＃13;

Answer 1

您需要设置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做客户端。

Answer 2

好的让它发挥作用。看看我的工作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＃下拉列表项颜色不显示

2 个答案: