使用 Javascript 测试选定的 asp 列表框项

Testing a selected asp Listbox item with Javascript

本文关键字：asp 列表 Javascript 测试 使用      更新时间：2023-09-26

有一个带有列表项的ListBox1： 

<asp:ListItem Value="No.1">No.1</asp:listitem>

并且有一个测试标签

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

现在我正在尝试使用 Javascript （jQuery） 测试当列表框留下制表符或输入符时是否选择了列表项 1，但这不起作用。这个javascript（jQuery）代码可能有什么问题？

$("#ListBox1").focusout(function () {
    if ($("#ListBox1").SelectedItem.Text === "No.1") {
        // tried also if ($("#ListBox1").val() === "No.1") { 
        $("#lblLabel").Text = $("#ListBox1").SelectedItem.Text;
    }
});

最大的问题是服务器端 ASP.Net 表单控件 ID 在客户端上呈现为完全不同的内容。您可以这样做：

$("#<%=ListBox1.ClientID%>").focusout(function() { ... });

在我看来，这变得非常丑陋，所以我更喜欢使用类。您可以像这样定义控制标记：

<asp:Label ID="lblLabel" CssClass="obj_lblLabel" runat="server" Text="Label1" ></asp:Label>

这将允许您使用类选择器在客户端标识控件：

$(".obj_lblLabel").focusout(function() { ... });

您不一定需要 obj_ 前缀，但这是我个人用来表示该类不用于样式目的的前缀。

此外，jQuery有一个change()事件，它比focusout()更适合使用。

最后，您应该避免主动 ASP.Net 表单开发。这是一个破碎的范式，行业正在迅速摆脱。ASP.Net MVC更容易使用，甚至可以更好地合并到您现有的项目中。请参阅此处：ASP.Net MVC 和 Web 窗体

这使用jQuery并使用focusout事件进行了修改，因此列表框仍然可以使用滚动键滚动。 

$('#ListBox1').focusout(function () {
            var data = $(this).val();
            if (data == "No.1") {
                //alert(data);
                $('#myModal').modal('toggle');
            }
            $("#ListBox1").focus();
        });
相关文章：