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

    }