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

Question

ListBox1 有一个列表项：

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

并且有一个测试标签

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

现在我正在尝试使用 Javascript (jQuery) 测试当列表框保留有 tab 或 enter 时是否选择了列表项 1 并且不起作用。此 javascript (jQuery) 代码可能有什么问题？

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

Answer 1

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

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

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

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

这将允许您使用 class 选择器在客户端识别您的控件：

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

您不一定需要 obj_ 前缀，但我个人用它来表示 class 未用于样式目的。

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

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

Answer 2

这解决了问题，jQuery 并使用了 focusout 事件，因此列表框仍然可以使用滚动键滚动。

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

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

Testing a selected asp Listbox item with Javascript

javascript

jquery

asp.net

listbox