HOW TO Pass Values Between Multiple Select Boxes using jquery

Question

Hi I am trying to pass selected item from one multiple combo box to another to multi combobox.

How do I do that? is there any example for that?

<HTML>
<HEAD>
  <TITLE></TITLE>
</HEAD>
<BODY>
  <SELECT NAME="possible" SIZE"10" MULTIPLE>
    <OPTION VALUE="New Red Corvette">New Red Corvette</OPTION>
    <OPTION VALUE="Vintage Red Corvette">Vintage Red Corvette</OPTION>
    <OPTION VALUE="Old Red Corvette">Old Red Corvette</OPTION>
  </SELECT>
  <SELECT NAME="wishlist" SIZE="10" MULTIPLE>
    <OPTION VALUE="Old Red Jalopy">Old Red Jalopy</OPTION>
  </SELECT>


<INPUT TYPE="BUTTON" VALUE="Add to wishlist"
       ONCLICK="MyMoveItem(possible,wishlist);">
<INPUT TYPE="BUTTON" VALUE="Remove from wishlist" 
       ONCLICK="MyMoveItem(wishlist,possible);">

</BODY>
</HTML>

Can you share with us, what have you tried so far ?

user6068334
– user6068334

2016-03-16 14:15:35 +00:00
Commented Mar 16, 2016 at 14:15 — user6068334
– user6068334, Commented Mar 16, 2016 at 14:15
What does your MyMoveItem() function look like?

Duncan Tidd
– Duncan Tidd

2016-03-16 14:17:35 +00:00
Commented Mar 16, 2016 at 14:17 — Duncan Tidd
– Duncan Tidd, Commented Mar 16, 2016 at 14:17

asdf_enel_hak · Accepted Answer · 2016-03-16 14:30:51Z

1

$("#b1").click(function(){
  $("#s2").append( $("#s1 option:selected"))
})

$("#b2").click(function(){
  $("#s1").append( $("#s2 option:selected"))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SELECT id="s1" NAME="possible" SIZE"10" MULTIPLE>
    <OPTION VALUE="New Red Corvette">New Red Corvette</OPTION>
    <OPTION VALUE="Vintage Red Corvette">Vintage Red Corvette</OPTION>
    <OPTION VALUE="Old Red Corvette">Old Red Corvette</OPTION>
  </SELECT>
  <SELECT id="s2" NAME="wishlist" SIZE="10" MULTIPLE>
    <OPTION VALUE="Old Red Jalopy">Old Red Jalopy</OPTION>
  </SELECT>


<INPUT TYPE="BUTTON" id="b1" VALUE="Add to wishlist"
       ONCLICK="MyMoveItem(possible,wishlist);">
<INPUT TYPE="BUTTON" id="b2" VALUE="Remove from wishlist" 
       ONCLICK="MyMoveItem(wishlist,possible);">

edited Mar 16, 2016 at 14:30

answered Mar 16, 2016 at 14:22

asdf_enel_hak

7,6585 gold badges47 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alvaro Flaño Larrondo Over a year ago

There is no need for the remove() as jQuery realizes the element already exists and it moves it instead of cloning it.

Alvaro Flaño Larrondo Over a year ago

Just wanted to add that this solution also handles multiple selected items holding the CTRL key.

Collectives™ on Stack Overflow

HOW TO Pass Values Between Multiple Select Boxes using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related