ListItems 的不同颜色不适用于所选值？

Posted 2023-04-01

【中文标题】ListItems 的不同颜色不适用于所选值？

【英文标题】：Different colors for ListItems doesn't work for selected value?

【发布时间】：2021-02-22 21:17:08

【问题描述】：

目标/预期：根据价值为每个项目显示不同的颜色。如果值为 True，则 ListItem 应为绿色，而值为 False 的 ListItem 应为红色。我想要两个颜色。无论默认值是什么，仍应显示颜色。 注意：我想使用纯asp.net/c#，我不想实现任何jQuery来实现这一点。

实际结果/问题：它只显示下拉菜单中相反值的颜色。注意默认是白色的黑色文本，即使它应该有颜色：

但它只显示颜色，直到我点击下拉菜单。在此示例中，来自数据库的值 False 应为红色。 True 应该是绿色的。 True 为绿色，但 False（默认/选定值）没有颜色变化：

C#：

M3.Text = professorStatsListDto.professorStatsList[2].LastName.ToString();
LT3.Text = professorStatsListDto.professorStatsList[2].Available.ToString();
RT3.Text = (!professorStatsListDto.professorStatsList[2].Available).ToString();
img3.ImageUrl = professorAvatar;
row3.Visible = true;
if (LT3.Value == "False")

    LT3.Attributes.Add("style", "color: red;");
    RT3.Attributes.Add("style", "color: green;");

我从set Different colors in asp:DropDownList Items得到这个概念

我还尝试将它作为一个类添加： LT3.Attributes.Add("class", "dropdownRed");但这并没有做任何事情。根据programmatically add css class to ListItem 我也尝试过 .CssClass，但您不能将其应用于 ListItems 我也尝试过应用到 DropdownList，但这使得所有项目的颜色都相同，这不是我想要的

HTML/ASPX：

<asp:Panel ID="row3" runat="server" Visible="false" CssClass="avMargin">
    <asp:Image ID="img3" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L3" runat="server" Font-Size="17px" /></sup> <asp:Label ID="M3" runat="server" CssClass="professorname" /> 
    <asp:DropdownList runat="server" id="ddlAvailability3" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
        <asp:ListItem ID="LT3"></asp:ListItem>
        <asp:ListItem ID="RT3"></asp:ListItem>
    </asp:DropdownList>
</asp:Panel>

CSS（可能不相关，因为我使用了代码隐藏）：

.dropdowns 
    position: absolute;
    right: 20px;



.dropdownRed 
    position: absolute;
    right: 20px;
    color:red;


.dropdownGreen 
    position: absolute;
    right: 20px;
    color:green;

【问题讨论】：

你之前问过similar question。正如所有答案所暗示的那样，如果没有 jQuery，这不是你能做到的。

澄清一下：那是为了在下拉列表中放置一个圆圈。这是针对文本本身的。

【参考方案1】：

您可以试试这个示例。根据您的需求定制

ASPX

 <asp:DropDownList runat="server" ID="ddlAvailability3" AutoPostBack="true"
      OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged"
      CssClass="dropdowns">
     <asp:ListItem ID="LT3"></asp:ListItem>
     <asp:ListItem ID="RT3"></asp:ListItem>
 </asp:DropDownList>

Page_Load

protected void Page_Load(object sender, EventArgs e)

    /*
    * Initially binding the values in List item
    * Assuming GREEN for True and RED for False
    * 
    * */
    if (!IsPostBack)
    
        LT3.Value = "True";
        RT3.Value = "False";

        //Setting Selected Index as 0, that means TRUE
        ddlAvailability3.SelectedIndex = 0;
        //Now Set the Fore Color for Selected Item, here is true and color is green
        //If its False, SelectedIndex=1 and Color wanted to be Red
        ddlAvailability3.ApplyStyle(new Style()  ForeColor = Color.Green );
    

    /*
    * Whatever happen [POSTBACK || PAGELOAD ] LT3 Text color will be GREEN, and RT3 will be RED
    * */
    LT3.Attributes.CssStyle.Add("color", "green");
    RT3.Attributes.CssStyle.Add("color", "red");


protected void ddlAvailability_OnSelectedIndexChanged(object sender, EventArgs e)

    /*
    * Here we are setting the Text color of Selected Item
    * */
    var value = ddlAvailability3.SelectedValue;
    //if user is selected TRUE
    if (value.ToLower() == "true")
    
        //If true, the Color of the seleted Item will be GREEN
        //Here we are not setting any color for the ListItem. That is handling in Page_Load
        ddlAvailability3.ApplyStyle(new Style()  ForeColor = Color.Green );
    
    else
    
        //If false is selected, the Color of the seleted Item will be RED
        //Here we are not setting any color for the ListItem. That is handling in Page_Load
        ddlAvailability3.ApplyStyle(new Style()  ForeColor = Color.Red );
    

结果

【讨论】：

嗨，拉朱，谢谢。我试过了，但效果不太好，所以我尝试了一些改动。它应该在 PageLoad 上着色，而且当他们在下拉列表中进行选择更改时也会着色。我注意到根据实际值，颜色似乎不是动态的——LT3 无论是真还是假，总是绿色的。即使在我更改为 if/else 语句之后，它似乎也没有什么不同。当我从下拉列表中选择时，两个值都显示为绿色。

更新了答案，出处在这里github.com/raju-melveetilpurayil/…

过去 8 小时我一直在调试这个。它不起作用，所以我尝试了一些更改。我让它在页面首次加载时工作，但在实际选择下拉列表中的值时它不起作用（又名 OnSelectedIndexChanged）。例如，如果它是 False 并且我选择 True，那么它会将两个值都设为绿色（True 和 False 都是绿色）。我已经使用了你展示的代码，有和没有回发，以及 OnSelectedIndexChanged。

我不确定你在尝试什么。我添加了更多的 cmets 供您阅读。我只能提供示例，您需要解决方法以将其转换为您的场景。谢谢