使用 jquery 验证下拉列表不起作用

Question

我的表格中有一个下拉列表，其中有一个空白项目，如果在下拉列表中选择该空白项目时按下按钮，我希望在标签中显示一条错误消息

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListParedesinteriores_ItemChanged">

                            <asp:ListItem Text="" Value="-1"></asp:ListItem>

                            <asp:ListItem Value='5'>Excellent</asp:ListItem>

                            <asp:ListItem Value="4">Very good</asp:ListItem>

                            <asp:ListItem Value="3">Good</asp:ListItem>

                            <asp:ListItem Value="2">Bad</asp:ListItem>

                            <asp:ListItem Value="1">Very bad</asp:ListItem>

                        </asp:DropDownList>

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:Label ID="Label9" runat="server" Text=""></asp:Label>

这是我的 Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(document).ready(function ()

        {

            $("#Button1").click(function ()

            {

                var a = $("#<%= DropDownList1.ClientID %>");

                if (a.val() === "-1")

                {

                    document.getElementById("Label9").innerHTML = "<b>Please select an option</b>";

                    document.getElementById("Label9").style.color = "red";

                }

                else

                {

                    document.getElementById("Label9").innerHTML = "<b>Comfirmed</b>";

                    document.getElementById("Label9").style.color = "green";

                }

            })

        })

    </script>

Answer 1

首先，这个按钮是一个服务器端按钮，您必须使用 onClientClick="return false" 禁用回发才能在客户端工作。其次，为了使用 Button1 作为 id($("#Button1")) 您需要将 ClientIDMode 更改为 static 同样适用于标签&nbsp; <asp:Button ID="Button1" runat="server" Text="Button"&nbsp; onClientClick="return false"&nbsp; ClientIDMode="Static" />&nbsp; <asp:Label ID="Label9" runat="server" Text="" ClientIDMode="Static"></asp:Label>如果您不想使用静态客户端 ID，则必须替换$("#Button1") with&nbsp; $("#<%= Button1.ClientID %>")&nbsp; &nbsp;document.getElementById("Label9") with document.getElementById("<%= Label9.ClientID %>")

Answer 2

您的按钮 1 选择器“$(”#Button1).click”单击事件不会像下拉列表那样考虑客户端 ID。如果 jquery 找不到按钮 1 的任何内容并且单击事件从未被触发，则可能会导致问题。一个可能的修复方法是将选择器更改为与使用 jquery 获取下拉列表的行中相同的选择器。