Add Item from Dropdownlist to ListBox using JQuery

Question

How can i add anything user selected from dropdownlist to listbox using JQuery? and when i post the page i should be able to retrieve "id, name" from the listbox.

<asp:DropDownList ID="ddlPerson" DataSourceID="ods_person" 
                DataValueField="Id" DataTextField="Name" runat="server" Width="221px" /><br />

                <asp:ListBox ID="lstPerson" runat="server" Width="245px"  
                Font-Bold="true" ForeColor="Green" SelectionMode="Multiple">
                </asp:ListBox> <br>

Answer 1

When your asp.net dropdown list control renders, it will not look the same. You need to run the page first to see what id to select it by. Then use the $("#ddlPerson...").val() and .text() methods to access the data.

Answer 2

To add the items to the dropdown you can use the following script

<script type="text/javascript">
    $(function ()
    {
        $('[id$=items]').change(function (e)
        {
            var option = $('<option/>').html($(e.currentTarget).val());
            $('[id$=listBox]').append(option);
        });
    });
</script>

BUT you will run into an issue. Items added to listbox will not be persisted back into the list box's "Items" on the server. You will need to add these values into a hidden field on the client and split up the values on the server.