HTML/JavaScript - Select list move options

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)


Overview

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.

Related tutorials

There is more than one way to add and remove options from a select list. Here at mredkj.com, there are some more examples.

Browser Support

2005-10-23

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.

2005-01-24

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.

2001-09-07

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).

The example on this page only calls history.go(0) for Netscape 4.X and below.

Explanation

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

Public Domain

The HTML and JavaScript listed below (alternatively in tutorial_mixed2b.js) are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

<script language="JavaScript" type="text/javascript">
<!--

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

function addOption(theSel, theText, theValue)
{
  var newOpt = new Option(theText, theValue);
  var selLength = theSel.length;
  theSel.options[selLength] = newOpt;
}

function deleteOption(theSel, theIndex)
{ 
  var selLength = theSel.length;
  if(selLength>0)
  {
    theSel.options[theIndex] = null;
  }
}

function moveOptions(theSelFrom, theSelTo)
{
  
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
  
  var i;
  
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--)
  {
    if(theSelFrom.options[i].selected)
    {
      selectedText[selectedCount] = theSelFrom.options[i].text;
      selectedValues[selectedCount] = theSelFrom.options[i].value;
      deleteOption(theSelFrom, i);
      selectedCount++;
    }
  }
  
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--)
  {
    addOption(theSelTo, selectedText[i], selectedValues[i]);
  }
  
  if(NS4) history.go(0);
}

//-->
</script>

The HTML

<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="--&gt;"
			 onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
			<input type="button" value="&lt;--"
			 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>

Change History

2005-10-23: Made changes just to the html, such as multiple to multiple="multiple", to make it xhtml compliant.

2005-08-30: No code changes. Moved the javascript into its own .js file tutorial_mixed2b.js

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.

2005-01-24:

2001-09-07: Code changed to accommodate Netscape 6.1. Browser section updated. Moved stuff around.

2001-07-17: Browser section updated.

About this page: