How to get Test & Value of selected items of Asp.Net Listbox Using Javascript and jQuery?

Introduction:

In this article I will explain how to get the Text and Value of multiple selected items of ASP.Net ListBox using JavaScript and jQuery. 

Get Text and Value of selected items of ASP.Net ListBox using JavaScript

The following HTML Markup consists of an ASP.Net ListBox control and a Button. When the Button is clicked, JavaScript function is executed.  Items are displayed using JavaScript alert.

<fieldset style="width:300px">

    <legend><strong>Listbox Example</strong></legend>

    <br />

   <asp:ListBox ID="ListBox1" runat="server" Width="250" Height="130" SelectionMode="Multiple">

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

    <asp:ListItem Text="Atul" Value="2"></asp:ListItem>

    <asp:ListItem Text="Ashsih" Value="3"></asp:ListItem>

    <asp:ListItem Text="Anish" Value="4"></asp:ListItem>

    <asp:ListItem Text="Anuj" Value="5"></asp:ListItem>

    <asp:ListItem Text="Ankit" Value="6"></asp:ListItem>

    <asp:ListItem Text="Ankush" Value="7"></asp:ListItem>

</asp:ListBox>

<br />

<hr />

<asp:Button ID="btnGetValues" Text="Get values" runat="server" OnClientClick="return GetValues()" />

<script type="text/javascript">

    function GetValues() {

        var values = "";

        var listBox = document.getElementById("<%= ListBox1.ClientID%>");

        for (var i = 0; i < listBox.options.length; i++) {

            if (listBox.options[i].selected) {

                values += listBox.options[i].innerHTML + " " + listBox.options[i].value + "\n";

            }

        }

        alert(values);

        return false;

    }

</script></fieldset>

Get Text and Value of selected items of ASP.Net ListBox using jQuery:

<fieldset style="width:300px">

    <legend><strong>Listbox Example</strong></legend>

    <br />

   <asp:ListBox ID="ListBox1" runat="server" Width="250" Height="130" SelectionMode="Multiple">

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

    <asp:ListItem Text="Atul" Value="2"></asp:ListItem>

    <asp:ListItem Text="Ashsih" Value="3"></asp:ListItem>

    <asp:ListItem Text="Anish" Value="4"></asp:ListItem>

    <asp:ListItem Text="Anuj" Value="5"></asp:ListItem>

    <asp:ListItem Text="Ankit" Value="6"></asp:ListItem>

    <asp:ListItem Text="Ankush" Value="7"></asp:ListItem>

</asp:ListBox>

<br />

<hr />

<asp:Button ID="btnGetValues" Text="Get values" runat="server" OnClientClick="return GetValues()" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        $("[id*=btnGetValues]").click(function () {

            var values = "";

            var selected = $("[id*=ListBox1] option:selected");

            selected.each(function () {

                values += $(this).html() + " " + $(this).val() + "\n";

            });

            alert(values);

            return false;

        });

    });   

</script>

</fieldset>