Jquery 或 Javascript 仅更改所选 DropDownList 项的文本颜色

Question

我似乎无法弄清楚这一点。 我有一个asp DropDownList 控件。 这由我从 SQL 获得的数据的 class 列表填充。 DropDownList 位于 ASP 中继器中。 我向触发 C# 方法的 asp 控件添加了 OnSelectedIndexChanged 属性。 我在 DropDownList 的初始化方法中有一些逻辑，它将特定项目的文本颜色设置为红色（取决于该项目类中的值）。 Whenever that item is selected the text is not red. 只有当它是列表中的一个项目时，文本才会显示为红色。 如何更改所选项目的颜色？ 我似乎无法弄清楚这一点。 我需要 C# 端的 OnSelectedIndexChanged 方法来触发事件以过滤另一个选择器。 So I am already firing an event when the selector is changed. 但是我尝试了以下方法：

protected void ddlItem_SelectedIndexChanged(object sender, EventArgs e)
{
    if (sender != null)
    {
        DropDownList DropDownList1 = (DropDownList)sender;
        DropDownList1.SelectedItem.Attributes.Add("color", "Red;");
    }
}

以上不起作用。 但我不认为这是问题所在。 检查元素后（在上述实现之前），样式颜色属性已设置为红色。 这些只是不适用于当前选定的项目吗？

我可以通过设置前景色来设置整个列表的文本颜色。 但我不能设置单个元素的前景色。

Answer 1

除了 firefox 和 chrome 的一些最新版本之外，我认为您通常无法做到这一点。 传统上，我们从来没有对 HTML SELECT 元素进行太多样式控制，因为它们最初只是一个标准的桌面 UI 小部件固定在页面中。

有关更多详细信息，请参阅此答案： How to style a <select> dropdown with CSS only without JavaScript?

也就是说，您确定不应该在option上设置Style["color"]而不是attribute吗？

Answer 2

这是一个带有前景色样式的选项标签的 jsfiddle。 Chrome 似乎工作的方式，选项颜色仅在下拉菜单打开时才重要。

Answer 3

Select 控件通常由操作系统（而不是浏览器）呈现，并且实现因浏览器和浏览器以及操作系统而异。 因此，通常不可能使用 CSS 可靠地设置 select 控件的样式。

但是，有许多技术可以解决这个限制。 最常见的一种是将 select 替换为动态 HTML 列表。 您可以使用 CSS 和 Javascript 的组合使列表以非常类似于 select 控件的方式运行。

有许多 jQuery 插件可以为您完成艰苦的工作。 您可以使用此页面作为起点。

Answer 4

DropDownList1.SelectedItem.Attributes.CssStyle.Add("color", "red");

当我尝试它时工作; 它改变了所选项目的颜色。

    <asp:DropDownList ID="ddlItem" runat="server" AutoPostBack="True" 
        onselectedindexchanged="ddlItem_SelectedIndexChanged">
    <asp:ListItem Text="hi" Value="hi" />
    <asp:ListItem Text="there" Value="there" />
    <asp:ListItem Text="testing" Value="testing" />
    </asp:DropDownList>

    protected void ddlItem_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (sender != null)
        {
            DropDownList DropDownList1 = (DropDownList)sender;
            DropDownList1.SelectedItem.Attributes.CssStyle.Add("color", "red");
        }

    }