HOW TO: Pass Values Between Multiple Select Boxes (315655)

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:

<HTML>
<HEAD>
  <TITLE>Move Multiple Selections Demo</TITLE>
</HEAD>
<BODY>
  <SELECT NAME="possible" SIZE"10" MULTIPLE>
    <OPTION VALUE="New Red Corvette">New Red Corvette</OPTION>
    <OPTION VALUE="Vintage Red Corvette">Vintage Red Corvette</OPTION>
    <OPTION VALUE="Old Red Corvette">Old Red Corvette</OPTION>
  </SELECT>
  <SELECT NAME="wishlist" SIZE="10" MULTIPLE>
    <OPTION VALUE="Old Red Jalopy">Old Red Jalopy</OPTION>
  </SELECT>
</BODY>
</HTML>

This code creates two select boxes named possible and wishlist.

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="BUTTON" VALUE="Add to wishlist"
       ONCLICK="MyMoveItem(possible,wishlist);">
<INPUT TYPE="BUTTON" VALUE="Remove from wishlist" 
       ONCLICK="MyMoveItem(wishlist,possible);">
					
```
Notice that these buttons call the MyMoveItem function, which moves selected items from one select box to another select box.

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="JScript">
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.

Save the file as C:\SelectDemo.htm.

back to the top

Verify That It Works

Start Internet Explorer.
Type C:\SelectDemo.htm in the Address bar.
Verify that the HTML page displays two select boxes and two buttons.
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.
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

REFERENCES

For additional information about how to do this across frames, click the article number below to view the article in the Microsoft Knowledge Base:

237831 PRB: Problem Adding New Option to Select Box in Another Frame in Internet Explorer 5

back to the top

HOW TO: Pass Values Between Multiple Select Boxes (315655)

IN THIS TASK

SUMMARY

Requirements

Create Multiple Select Boxes and Add the Code to Pass Values

Verify That It Works

REFERENCES