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

【问题标题】：Jquery or Javascript to change just the text color of a selected DropDownList ItemJquery 或 Javascript 仅更改所选 DropDownList 项的文本颜色
【发布时间】：2011-10-08 21:32:28
【问题描述】：

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

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

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

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

【问题讨论】：

我强烈建议您尝试避免通过 ForeColor、BackColor 属性的代理在 HTML 元素上间接设置内联样式的便捷 MS 路线。我真的认为你会很好地学习 CSS 和 jQuery 来更好地控制你的 UI，或者至少在你的控件上设置 CSS 类而不是直接设置样式颜色。尝试将 HTML 结构与样式分开，以便于将来的维护和更改。

标签： c# javascript jquery asp.net drop-down-menu

【解决方案1】：

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

更多详情请查看此答案：How to style a <select> dropdown with CSS only without JavaScript?

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

【讨论】：

你可以做一些造型，但有必要了解限制。

【解决方案2】：

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

【讨论】：

【解决方案3】：

选择控件通常是rendered by the operating system（而不是浏览器），并且实现方式因浏览器和操作系统而异。因此，通常不可能使用 CSS 可靠地设置选择控件的样式。

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

有许多可用的 jQuery 插件可以为您完成繁重的工作。您可以使用this page 作为起点。

【讨论】：

【解决方案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");
        }

    }

【讨论】：