Testing a selected asp Listbox item with Javascript

Question

There is ListBox1 with a listitem:

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

And there is a label for a test

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

Now I am trying to test with Javascript (jQuery) whether the listitem No. 1 is selected when the listbox is left with tab or enter and that does not work. What could be wrong with this javascript (jQuery) code?

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

Community · Accepted Answer · 2017-05-23 11:56:59Z

0

The biggest problem is that ASP.Net Form Control Ids on the server side are rendered out as something completely different on the client. You can do this:

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

In my opinion this gets really ugly really fast so I prefer to use classes instead. You define your control tag like so:

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

This will allow you to identify your control on the client side using a class selector:

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

You don't necessarily need the obj_ prefix but it's what I use personally to denote that the class is not being used for styling purposes.

Furthermore, jQuery has a change() event which would be more appropriate to use than focusout().

Lastly, you should avoid active ASP.Net Forms development. It's a broken paradigm that the industry is quickly moving away from. ASP.Net MVC is much easier to work with and even better it can be incorporated into your existing project. See here: ASP.Net MVC alongside Web Forms

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jan 21, 2015 at 19:46

Spencer Ruport

35.2k12 gold badges89 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hank Over a year ago

For that purpose I use ClientIDMode="Static" on the ListBox1 and just added it on the lblLabel but without result. And your solution did nog make it work either. I guess it's the if.. statement?

Hank · Accepted Answer · 2015-01-23 12:04:23Z

0

This soved it, with jQuery and using the focusout event, so the listbox remains scrollable with the scroll keys.

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

edited Jan 23, 2015 at 12:04

answered Jan 22, 2015 at 14:03

Hank

152 silver badges6 bronze badges

Collectives™ on Stack Overflow

Testing a selected asp Listbox item with Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related