let we assume i have listbox A and B, then 2 buttons called Left and Right. my req. is if i click Right then move the item from A to B, so, that i used this code
if the user selects ALL from A then i have to move all data from A to B, for that i used this code
$("#fromListBox option").appendTo("#toListBox");
the real problem is, the data was move from A to B but the data was actually removed from A and added to B. But, i want to keep the data on A as well as B. so, experts please advise me how to resolve this issue.
Any doubts please feel free to ask me. If this post is answer of your question then don't forgot to Click "Mark As Answer".
J.Jeyaseelan
jeyaseelan@a...
Contributor
5124 Points
2025 Posts
move listbox items using jquery
Apr 04, 2012 11:52 AM|LINK
hi all,
let we assume i have listbox A and B, then 2 buttons called Left and Right. my req. is if i click Right then move the item from A to B, so, that i used this code
$("#fromListBox option:selected").appendTo("#toListBox");if the user selects ALL from A then i have to move all data from A to B, for that i used this code
$("#fromListBox option").appendTo("#toListBox");the real problem is, the data was move from A to B but the data was actually removed from A and added to B. But, i want to keep the data on A as well as B. so, experts please advise me how to resolve this issue.
J.Jeyaseelan
Vipindas
Contributor
5514 Points
810 Posts
Re: move listbox items using jquery
Apr 04, 2012 12:40 PM|LINK
Try this
$("#fromListBox option:selected").clone().appendTo("#toListBox");
Example:
<div> <h3>List A</h3> <select id="list1" multiple="multiple" rows=2> <option value=1>Option 1</option> <option value=2>Option 2</option> <option value=3>Option 3</option> <option value=4>Option 4</option> <option value=5>Option 5</option> <option value=6>Option 6</option> </select> <br/> <input id="button1" type="button" value="Move to List B" /> </div> <div> <h3>List A</h3> <select id="list2" multiple="multiple" rows=2> </select> </div> $(function(){ $("#button1").click(function(){ $("#list1 > option:selected").each(function(){ $('#list1 option:selected').clone().appendTo("#list2"); }); }); });