更改 DropdownList 值后更改 ASP 标签文本颜色？

Question

目标：在选择 ASP 下拉列表项时改变 ASP 标签文本颜色。如果 ListItem 的值为 false，则 Label 的文本应为红色。否则保持黑色。

问题：只有在页面刷新时才会改变颜色（或者如果在原始页面加载时数据库中的值已经是 false）

我的尝试：

• 我尝试过使用 .Text 和 .SelectedValue
• 我尝试在 DropdownList 的 OnSelectedIndexChanged 期间运行此操作
• 查看了其他文章，但他们提到了用于 SAME 控件的 javascript，而不是在 DIFFERENT 控件上更改颜色而不是选择的控件（例如 ASP.NET Change link button color when clicked without post-back or update panel）

这是否可能纯粹在 C#/asp.net 中而无需刷新页面？ 如果我需要做javascript，如何从下拉列表到标签？

HTML：

<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server" height="20" width="20" CssClass="providericon"/><sup><asp:Label ID="myLabel" runat="server" Font-Size="20px" CssClass="oval"/></sup> 
                <asp:Label ID="myLabelMid" runat="server" CssClass="professorname"/>
                <asp:DropdownList runat="server" id="ddlAvailability1" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
                    <asp:ListItem ID="LT1"></asp:ListItem>
                    <asp:ListItem ID="RT1"></asp:ListItem>
                </asp:DropdownList>
            </ContentTemplate>
        </asp:UpdatePanel>          
</div>
        
<asp:Panel ID="row2" runat="server" Visible="false">
    <%--<asp:ScriptManager runat="server"></asp:ScriptManager>--%>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Image ID="img2" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup> <asp:Label ID="M2" runat="server" CssClass="professorname"/> 
            <asp:DropdownList runat="server" id="ddlAvailability2" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
                <asp:ListItem ID="LT2"></asp:ListItem>
                <asp:ListItem ID="RT2"></asp:ListItem>
            </asp:DropdownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>    

CSS：

.professorname {
    margin-left: 15px;
    position: absolute;
    left: 55px;
}

.redtext {
    color: red;
    margin-left: 15px;
    position: absolute;
    left: 55px;
}

C#：

Page_Load(){
    myLabelMid.CssClass = (ddlAvailability1.SelectedValue == "False") ? "redtext" : "professorname";
    M2.CssClass = (ddlAvailability2.SelectedValue == "False") ? "redtext" : "professorname";
    M3.CssClass = (ddlAvailability3.SelectedValue == "False") ? "redtext" : "professorname";
}
    
protected void ddlAvailability_OnSelectedIndexChanged(object sender, EventArgs e)
{
        DropDownList ddlSender = (DropDownList)sender;
        int professorIndex = getProviderIndex(ddlSender.ClientID);
        
}

public int getProfessorIndex(string ddlSenderClientID)
{
            int professorIndex = 0;
            switch (ddlSenderClientID)
            {
                case "ddlAvailability1":
                    professorIndex = 0;
                    myLabelMid.CssClass = (ddlAvailability1.SelectedValue == "False") ? "redtext" : "professorname ";
                    break;
                case "ddlAvailability2":
                    professorIndex = 1;
                    M2.CssClass = (ddlAvailability2.SelectedValue == "False") ? "redtext" : "professorname ";
                    break;
            }
            return professorIndex;
}

Answer 1

DropdownList 是一个 ASP.NET 控件，它需要 AutoPostback 来触发 SelectedIndexChanged 事件，我刚刚调整了您的问题和最简单的解决方案是使用一个覆盖DropdownList和Label的更新面板：

ASPX 代码：

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" Text="test"/> 
        <asp:DropdownList runat="server" ID="ddlAvailability1" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability1_SelectedIndexChanged" CssClass="dropdowns">
            <asp:ListItem ID="LT1" Text="yes"></asp:ListItem>
            <asp:ListItem ID="RT1" Text="no"></asp:ListItem>
        </asp:DropdownList>
    </ContentTemplate>
</asp:UpdatePanel>

C# 代码：

protected void ddlAvailability1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (ddlAvailability1.SelectedValue == "no") { myLabelMid.CssClass = "redtext"; }
    else { myLabelMid.CssClass = "professorname";}
}

我认为通过 JavScript 实现相同的行为是可能的，但它是使用 ASP.NET 控件的更复杂的解决方案，因为一旦 PostBack 完成，您将需要在函数中进行验证，这可以使用 @ 来完成987654323@.

Answer 2

您的代码存在一些问题。

如果您使用OnSelectedIndexChanged，DDL 将触发 PostBack，并且使用 jQuery 对 DOM 所做的所有更改都将丢失。你似乎知道这一点，但我提到它只是为了确保。因此，如果您使用它，请确保在 IsPostBack 检查中绑定数据。

您的代码 sn-p 中没有 False。 ListItem 是否被选中，但您使用的是Value，而不是选择是/否的状态。

ListItem 没有ID 属性。

查看下面的 sn-p 以获取 jQuery 文本颜色更改演示。使用其中一个，而不是同时使用两个。

<asp:DropDownList runat="server" ID="ddlAvailability1" CssClass="dropdowns">
    <asp:ListItem Value="">Select a Professor</asp:ListItem>
    <asp:ListItem Value="LT1">Professor LT1</asp:ListItem>
    <asp:ListItem Value="LT2">Professor LT2</asp:ListItem>
    <asp:ListItem Value="LT3">Professor LT4</asp:ListItem>
</asp:DropDownList>

<script>
    //this changes the color to red as soon as something changes in the dll
    $('.dropdowns').bind('change', function () {
        $(this).addClass('redtext');
    });

    //this changes the color to red when anything other than the first item is selected,
    //else it becomes black again
    $('.dropdowns').bind('change', function () {
        if ($(this).prop('selectedIndex') !== 0) {
            $(this).addClass('redtext');
        } else {
            $(this).removeClass('redtext');
        }
    });
</script>

<style>
    .dropdowns {
        color: black;
    }

    .redtext {
        color: red;
    }
</style>

Answer 3

VDWWD's answer 对您的代码提出了一些重要问题。您还应该使用标签上的AssociatedControlId 属性来正确地将标签元素与您的下拉列表相关联。这会将for 属性添加到您的标签中。然后我们可以在 javascript 中利用它。

类似于以下内容。

<!-- Note the added AssociatedControlId attribute and the
     removal of OnSelectedIndexChange and AutoPostback -->
<div>
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Image ID="img1" runat="server" height="20" width="20" CssClass="providericon"/><sup><asp:Label ID="myLabel" runat="server" Font-Size="20px" CssClass="oval" /></sup> 
                <asp:Label ID="myLabelMid" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1" />
                <asp:DropdownList runat="server" id="ddlAvailability1" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
                </asp:DropdownList>
            </ContentTemplate>
        </asp:UpdatePanel>          
</div>
        
<asp:Panel ID="row2" runat="server" Visible="false">
    <%--<asp:ScriptManager runat="server"></asp:ScriptManager>--%>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Image ID="img2" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="20px" CssClass="oval"/></sup> <asp:Label ID="M2" runat="server" CssClass="professorname" AssociatedControlId="ddlAvailability1"/> 
            <asp:DropdownList runat="server" id="ddlAvailability2" CssClass="dropdowns">
                    <asp:ListItem value="true">Yes</asp:ListItem>
                    <asp:ListItem value="false">No</asp:ListItem>
            </asp:DropdownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>   

Javascript

let dropdowns = document.querySelectorAll(".dropdowns");
//Add Event Listeners
for(var i = 0; i < dropdowns.length; i++) {
   dropdowns[i].addEventListener("change", function() {
      //Find labels associated with control
      let labels = document.querySelectorAll("[for=" + this.id +"]");
      //toggle the redtext class on labels based on the selected value
      for(var j = 0; j < labels.length; j++) {
         labels[0].classList.toggle("redtext", this.value === "true");
      }
      //NOTE: if you know each dropdown only has one label
      //      use document.querySelectorAll and skip the loop
      //      document.querySelector("[for=" + this.id +"]").classList.toggle("redtext", this.value === "false");
   })
}

注意所有代码都未经测试，可能需要进行一些调试，但这应该会让您朝着正确的方向前进。另请注意，如果您已经在使用 jQuery，这里也是一个选项。