In this article I will explain how to get the Text and Value of multiple selected items of ASP.Net ListBox using jQuery.
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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
ListBox_Values_JavaScript_jQuery.zip