Use jQuery to Move Data Between SELECT Element

You have two select elements and want to move the values between them. We call the first element is ‘left_list’ and another is ‘right_list’. We dont want the dropdown look, so we add a property ‘multiple’. So any user not just select one item but can select more than one item by hold CTRL key. We also need two button as the triggers to move the values from the left to the right and otherwise. The ‘=>’ is used to move the values from the left to the right and the ‘<=’ for otherwise. two_select_elementsHere is the HTML code.

  1. <table style="text-align:center;">
  2. <tbody>
  3. <tr>
  4. <td>Left List:</td>
  5. <td></td>
  6. <td>Right List:</td>
  7. </tr>
  8. <tr>
  9. <td>
  10. <select id="left_list" name="left_list[]" multiple="" size="12">
  11. <option value="7">Blackberry</option>
  12. <option value="8">Blackcurrant</option>
  13. <option value="19">Damson</option>
  14. <option value="22">Durian</option>
  15. </select>
  16. </td>
  17. <td>
  18. <input id="move_right" name="move_right" value="=>" type="button"><br>
  19. <input id="move_left" name="move_left" value="<=" type="button">
  20. </td>
  21. <td>
  22. <select id="right_list" name="right_list[]" multiple="" size="12">
  23. <option value="17">Cranberry</option>
  24. <option value="14">Cherimoya</option>
  25. <option value="1">Apple</option>
  26. <option value="2">Apricot</option>
  27. </select>
  28. </td>
  29. </tr>
  30. </tbody>
  31. </table>

To make the two buttons functioning properly, we need to add some javascript code. I prefer jQuery, so here is the code.

  1. <script type="text/javascript">
  2. $().ready(function(){
  3. $('#move_right').click(function(){
  4. return !$('#left_list option:selected').remove().appendTo('#right_list');
  5. });
  6. $('#move_left').click(function(){
  7. return !$('#right_list option:selected').remove().appendTo('#left_list');
  8. });
  9. });
  10. </script>

We want to move the data from the left to the right. Select any value on the left first like this.select_leftThen press/click the upper button (=>) to move the value to right. If its working, here is the result.move_rightOkay, we can do it otherwise by clicking the lower button (<=). Here is the complete code.

  1. <html>
  2. <head>
  3. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4. <script type="text/javascript">
  5. $().ready(function(){
  6. $('#move_right').click(function(){
  7. return !$('#left_list option:selected').remove().appendTo('#right_list');
  8. });
  9. $('#move_left').click(function(){
  10. return !$('#right_list option:selected').remove().appendTo('#left_list');
  11. });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <table style="text-align:center;">
  17. <tbody>
  18. <tr>
  19. <td>Left List:</td>
  20. <td></td>
  21. <td>Right List:</td>
  22. </tr>
  23. <tr>
  24. <td>
  25. <select id="left_list" name="left_list[]" multiple="" size="12">
  26. <option value="7">Blackberry</option>
  27. <option value="8">Blackcurrant</option>
  28. <option value="19">Damson</option>
  29. <option value="22">Durian</option>
  30. </select>
  31. </td>
  32. <td>
  33. <input id="move_right" name="move_right" value="=>" type="button"><br>
  34. <input id="move_left" name="move_left" value="<=" type="button">
  35. </td>
  36. <td>
  37. <select id="right_list" name="right_list[]" multiple="" size="12">
  38. <option value="17">Cranberry</option>
  39. <option value="14">Cherimoya</option>
  40. <option value="1">Apple</option>
  41. <option value="2">Apricot</option>
  42. </select>
  43. </td>
  44. </tr>
  45. </tbody>
  46. </table>
  47. </body>
  48. </html>