Microsoft KB Archive/315655

= HOW TO: Pass Values Between Multiple Select Boxes =

Article ID: 315655

Article Last Modified on 5/12/2003

-

APPLIES TO


 * Microsoft Internet Explorer 5.01
 * Microsoft Internet Explorer 5.5
 * Microsoft Internet Explorer (Programming) 6.0

-



This article was previously published under Q315655



IN THIS TASK
SUMMARY
 * Requirements
 * Create Multiple Select Boxes and Add the Code to Pass Values
 * Verify That It Works

REFERENCES



SUMMARY
This step-by-step article demonstrates how to move items from one select box to another select box in a Hypertext Markup Language (HTML) form. You can write Microsoft JScript code to remove all selected items from one select box and append the selected items to another select box.

back to the top

Requirements
The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:
 * Internet Explorer 5.01 or later

This article assumes that you are familiar with the following topics:
 * HTML
 * JScript

back to the top

Create Multiple Select Boxes and Add the Code to Pass Values
 Open a text editor such as Notepad.  Add the following HTML code to the file:   Move Multiple Selections Demo    New Red Corvette <OPTION VALUE=&quot;Vintage Red Corvette&quot;>Vintage Red Corvette</OPTION> <OPTION VALUE=&quot;Old Red Corvette&quot;>Old Red Corvette</OPTION> </SELECT> <SELECT NAME=&quot;wishlist&quot; SIZE=&quot;10&quot; MULTIPLE> <OPTION VALUE=&quot;Old Red Jalopy&quot;>Old Red Jalopy</OPTION> </SELECT> </BODY> </HTML> This code creates two select boxes named possible and wishlist.

</li>  Add the following code after the last <SELECT> end tag and before the <BODY> end tag to add two buttons to the HTML page: <INPUT TYPE=&quot;BUTTON&quot; VALUE=&quot;Add to wishlist&quot; ONCLICK=&quot;MyMoveItem(possible,wishlist);&quot;> <INPUT TYPE=&quot;BUTTON&quot; VALUE=&quot;Remove from wishlist&quot; ONCLICK=&quot;MyMoveItem(wishlist,possible);&quot;> Notice that these buttons call the MyMoveItem function, which moves selected items from one select box to another select box.

</li>  Add the following code after the last <SELECT> end tag and before the <BODY> end tag to add two buttons to the HTML page: <SCRIPT LANGUAGE=&quot;JScript&quot;> function MyMoveItem(fromObj, toObj) {  for (var selIndex = fromObj.length - 1; selIndex >= 0; selIndex--) {     // Is this option selected? if (fromObj.options[selIndex].selected) {        // Get the text and value for this option. var newText = fromObj.options[selIndex].text; var newValue = fromObj.options[selIndex].value; // Create a new option, and add to the other select box. var newOption = new Option(newText, newValue) toObj[toObj.length] = newOption;

// Delete the option in the first select box. fromObj[selIndex] = null; }  } } </SCRIPT> This code moves each selected option from one select box to the other select box. Notice that the code works from the end of the list to the beginning of the list. This occurs because the code deletes items as it executes. If the code begins at the beginning of the list, the code would miss some items when the options are moved up to fill in the spaces that are created by deletions. </li> Save the file as C:\SelectDemo.htm.</li></ol>

back to the top

Verify That It Works

 * 1) Start Internet Explorer.
 * 2) Type C:\SelectDemo.htm in the Address bar.
 * 3) Verify that the HTML page displays two select boxes and two buttons.
 * 4) Select some options in the first select box, and then click Add to wishlist. Notice that the selected options are deleted from the first select box and then are appended to the second select box.
 * 5) Select some options in the second select box, and then click Remove from wishlist. Notice that the selected options are deleted from the second select box and then are appended to the first select box.

back to the top