Add (Insert) Items to ASP.Net ListBox using jQuery

Introduction:

Here I will explain how to add Textbox value in  ASP.Net ListBox using JQuery

use of ASP.Net ListBox control, a TextBox and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, first the value from the TextBox is fetched and then a HTML OPTION element is created.
The TextBox value is set to the InnerHtml and Value property of the OPTION element. Finally the OPTION element is appended to the ASP.Net ListBox control.

 

<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode = "Multiple"></asp:ListBox>

<br />

<hr />

<asp:TextBox ID="txtValue" runat="server" />

<asp:Button ID="btnAdd" Text="Add" 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*=btnAdd]").bind("click", function () {

        var value = $("[id*=txtValue]").val();

        var listBox = $("[id*=ListBox1]");

        var option = $("").val(value).html(value);

        listBox.append(option);

        $("[id*=txtValue]").val("");

        return false;

    });

});

</script>