Click here to Skip to main content
15,904,494 members
Articles / Script
Article

Moving Items from One ListBox to other ListBox using JQuery

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
11 Oct 2013CPOL 20.6K   3   3
Following script will move the selected items from one list box item to another list box item.Markup: <asp:ListBox ID="lstBox1" runat="server"

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Following script will move the selected items from one list box item to another list box item.

Markup:

<asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple">

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

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

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

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

</asp:ListBox>

<asp:Button ID="btnMoveRight" runat="server" Text=">>" />

<asp:Button ID="btnMoveLeft" runat="server" Text="<<" />

<asp:ListBox ID="lstBox2" runat="server" SelectionMode="Multiple">

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

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

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

            <asp:ListItem Text="H" Value="8"></asp:ListItem>

</asp:ListBox>

JQuery script:

$(document).ready(function() {

            $('#<%=btnMoveRight.ClientID %>').click(function() {

                var selectedOptions = $('#<%=lstBox1.ClientID %> option:selected');

                if (selectedOptions.length == 0) {

                    alert("Please select option to move");

                    return false;

                }

                $('#<%=lstBox2.ClientID %>').append($(selectedOptions).clone());

                $(selectedOptions).remove();

                return false;

            });

            $('#<%=btnMoveLeft.ClientID %>').click(function() {

                var selectedOptions = $('#<%=lstBox2.ClientID %> option:selected');

                if (selectedOptions.length == 0) {

                    alert("Please select option to move");

                    return false;

                }

                $('#<%=lstBox1.ClientID %>').append($(selectedOptions).clone());

                $(selectedOptions).remove();

                return false;

            });

});

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

754 members

Comments and Discussions

 
QuestionThanks! Adjusted your code to work with multiple pairs of lists Pin
Member 235736229-Aug-14 8:04
Member 235736229-Aug-14 8:04 
Thanks for this code sample! I have adjusted it to support multiple pairs of lists.

Let's assume that ids for all four controls are formed as follows. The asterisk means a suffix shared by all four controls:
source list: src_*
target list: val_*
source to target button: mvl_*
target to source button: mvr_*

Then this version of code should support multiple list pairs.
JavaScript
<script>
	$(function() {
		$("[id^=mvr_],[id^=mvl_]").click(function(event) {
			var id = $(event.target).attr("id");

			var lst1 = '#src_' + id.substring(4);
			var lst2 = '#val_' + id.substring(4);
			
			var selectFrom = id.indexOf('mvr_') == 0 ? lst1 : lst2;
			var moveTo = id.indexOf('mvr_') == 0 ? lst2 : lst1;

			var selectedItems = $(selectFrom + " :selected").toArray();
			$(moveTo).append(selectedItems);
			selectedItems.remove;
		});
	});
</script> 


An example of such list pair:
HTML
<tr>
	<td valign='top'>
		<div class='divAnswerSelect'>
			<select id='src_102954' class='selectbox' size='5' multiple >
				<option class='selectoption' id='val_102954_104298' value='104298'>Option 1-1</option>
				<option class='selectoption' id='val_102954_104299' value='104299'>Option 1-2</option>
				<option class='selectoption' id='val_102954_104300' value='104300'>Option 1-3</option>
				<option class='selectoption' id='val_102954_104301' value='104301'>Option 1-4</option>
				<option class='selectoption' id='val_102954_104302' value='104302'>Option 1-5</option>
			</select>
		</div>
	</td>

	<td style='vertical-align: middle'>
		<input id='mvr_102954' type="button" value=' > ' /><br/>
		<input id='mvl_102954' type="button" value=' < ' />
	</td>
	
	<td valign='top'>
		<div class='divAnswerSelect'>
			<select id='val_102954' class='selectbox' size='5' multiple >
			</select>
		</div>
	</td>
</tr>

Questionsame code in different manner Pin
dotnetpickles10-Feb-14 16:54
dotnetpickles10-Feb-14 16:54 
QuestionPlease provide solution Pin
Member 961522216-Jan-14 19:00
Member 961522216-Jan-14 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.