Moving Options between two Select list boxes
<SELECT>, <OPTION>, and how to add/remove elements
Tutorial Mixed2b - Try It(Select from either list and click the buttons to move)
Select one or more of the Options (e.g. 'Left1', 'Left2', etc.) and click the right arrow (-->) that's between the two Select boxes. All selected items will be moved. The same is true in the left direction using the left arrow (<--).
The technique can be used in older and newer browsers.
Notice that when the options are moved, they go to the bottom of the list. To insert into a specific position, it would be a little more complicated. As a starting point, refer to tutorial006.
If you want an example of submitting the options, refer to tutorial007.
There is more than one way to add and remove options from a select list. Here at mredkj.com, there are some more examples.
- tutorial005 - Insert, remove, append last, remove last. For DOM compliant browsers only.
- tutorial006 - Insert, append, remove. Works in older and newer browsers.
After making the 2005-10-23 html changes, tested successfully in Firefox 1.0.7, Opera 8.02, Netscape 7.1, and IE 6.0.
The code is still the same as it was on 2001-09-07, but I decided to do some testing against newer browsers (still Windows versions). The example works in Firefox 1.0, Opera 7.54, Netscape 7.1, and IE 6.0.
The example on this page has been tested in the Windows versions of Netscape 3.04, Netscape 4.74, Netscape 6.1, and Internet Explorer 5.0.
The purpose of the refresh is to resize the Select box. If the list does not need to change from its original size, you may want to leave off the history.go(0).
- Without a refresh, Netscape 3.04 and 4.74 do not resize height or width. If the Select has a value for size, then that is used for height.
- Without a refresh, IE 5.0 and Netscape 6.1 resize height and width. If the Select has a value for size, then that is used for height. Also note: a refresh in these browsers will reset the contents of the Select to the original values.
Options are added by creating a new Option, then referencing a new position in the options collection.
The new position is equal to the length of the collection. Refer to the line:
theSel.options[selLength] = newOpt;
Options are removed by setting the position to null. Refer to the line:
theSel.options[theIndex] = null;
The moveOptions(theSelFrom, theSelTo) function searches the 'from' Select for selected Options, deletes them from the 'from' Select, and adds them to the 'to' Select. When checking for the selected Options, the 'from' Select box is iterated in reverse order. This is done so the selected Options can be deleted and not affect the order of the remaining Options. In the same loop, the text and value properties are stored in two Array variables. Then, another loop iterates the Arrays in reverse to put the Options into the 'to' Select in the same order they were in the 'from' Select.
Tutorial_Mixed_2b - Full Source
<form action="yourpage.asp" method="post"> <table border="0"> <tr> <td> <select name="sel1" size="10" multiple="multiple"> <option value="1">Left1</option> <option value="2">Left2</option> <option value="3">Left3</option> <option value="4">Left4</option> <option value="5">Left5</option> </select> </td> <td align="center" valign="middle"> <input type="button" value="-->" onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br /> <input type="button" value="<--" onclick="moveOptions(this.form.sel2, this.form.sel1);" /> </td> <td> <select name="sel2" size="10" multiple="multiple"> <option value="1">Right1</option> <option value="2">Right2</option> <option value="3">Right3</option> <option value="4">Right4</option> <option value="5">Right5</option> </select> </td> </tr> </table> </form>
2005-10-23: Made changes just to the html, such as multiple to multiple="multiple", to make it xhtml compliant.
2005-01-29: No code changes, just minor content changes, including the Related tutorials section.
2005-01-25: No code changes. Changed content in Related tutorials, Overview, Browser-Related Logic, The Logic to Move the Options, and Another Way.
- Changed the layout of the sample code
- Updated the loresoft.com link (Thanks to E. Sambo for pointing that out).
- Browser section updated.
2001-09-07: Code changed to accommodate Netscape 6.1. Browser section updated. Moved stuff around.
2001-07-17: Browser section updated.