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, the GetValues JavaScript function is executed. Inside this function, a loop is executed over the ListBox Items (HTML Option element) and the selected ListBox Items are displayed using JavaScript alert.
<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
    <asp:ListItem Text="Apple" Value="2"></asp:ListItem>
    <asp:ListItem Text="Banana" Value="3"></asp:ListItem>
    <asp:ListItem Text="Guava" Value="4"></asp:ListItem>
    <asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
    <asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
    <asp:ListItem Text="Grapes" 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>
 
 
Get Text and Value of selected items of ASP.Net ListBox using jQuery
The following HTML Markup consists of an ASP.Net ListBox control and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, the ListBox selected items (HTML Option element) are selected.
Finally a loop is executed over the selected ListBox Items (HTML Option element) and the selected ListBox Items are displayed using JavaScript alert.
<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
    <asp:ListItem Text="Apple" Value="2"></asp:ListItem>
    <asp:ListItem Text="Banana" Value="3"></asp:ListItem>
    <asp:ListItem Text="Guava" Value="4"></asp:ListItem>
    <asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
    <asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
    <asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<br />
<hr />
<asp:Button ID="btnGetValues" Text="Get values" runat="server" />
<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>
 
 
Screenshot
Get Text and Value of selected items of ASP.Net ListBox using JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads

Download Code