使用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() { ... });

在我看來，這確實非常丑陋，所以我更喜歡使用類。 您可以這樣定義控件標簽：

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

這將允許您使用類選擇器在客戶端上標識控件：

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

您不一定需要obj_前綴，但這是我個人用來表示該類未用於樣式設計的前綴。

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

最后，您應該避免積極的ASP.Net Forms開發。 該行業正在迅速擺脫這種破碎的范式。 ASP.Net MVC易於使用，甚至可以更好地集成到您現有的項目中。 參見此處： ASP.Net MVC和Web窗體

Answer 2

使用jQuery並使用focusout事件解決了這個問題，因此列表框仍然可以使用滾動鍵滾動。

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