It was a necessary requirement when we have to choose multiple selects, and we have to select multiple items from it.Soo, here is the code for simply doing it.Move Items From one Select Box to Another using JQuery is very simple.Just do it within two functions.
Also, you can test the demo and download the code from this page itself.
You can find the demo here
Also, You can download the zip file from here
For using Jquery, we need the JQuery library jquery-1.4.2.min.js atleast.
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> /* Auther : Jinto Antony Email : jinto1729@gmail.com Site : http://preprogrammer.com */ /* @param1 - sourcebox - The multiple select box with items has to be moved. @param2 - destinationbox - The multiple select box to where the items should be moved. */ //this will move selected items from source list to destination list function move_item_list(sourcebox, destinationbox) { $("#"+sourcebox+" option:selected").appendTo("#"+destinationbox); } //this will move all selected items from source list to destination list function move_item_list_all(sourcebox, destinationbox) { $("#"+sourcebox+" option").appendTo("#"+destinationbox); } </script> </script> |
CSS for the Html Multiple Select Box (Not necessary, you can do your own)
|
1 2 3 4 5 6 |
<style type="text/css"> select { width:400px; height:400px; } </style> |
Html for Select Box
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<table cellpadding="5" cellspacing="5"> <tbody> <tr> <td colspan="2"> <select id="from_list" multiple="multiple" name="from_list"> <option value="apple">Ferrari</option> <option value="mango">Bugatti</option> <option value="bannana">Lamborgini</option> <option value="grapes">Veyron</option> </select> </td> <td colspan="2"> <select id="to_list" multiple="multiple" name="to_list"> <option value="winder">Paeratti</option> <option value="summer">Hummer</option> <option value="rainy">Benz</option> <option value="Spring">BMW</option> </select> </td> </tr> <tr> <td> <input id="moveright" type="button" value="Move Right" onclick="move_item_list('from_list','to_list');" /> </td> <td> <input id="moverightall" type="button" value="Move Right All" onclick="move_item_list_all('from_list','to_list');" /> </td> <td> <input id="moveleft" type="button" value="Move Left" onclick="move_item_list('to_list','from_list');" /> </td> <td> <input id="moveleftall" type="button" value="Move Left All" onclick="move_item_list_all('to_list','from_list');" /> </td> </tr> </tbody> </table> <a href="http://preprogrammer.com" style='color:blue'>PreProgrammer.com</a> |
