Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

HOW TO: Pass Values Between Multiple Select Boxes


View products that this article applies to.

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.

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

Create Multiple Select Boxes and Add the Code to Pass Values

  1. Open a text editor such as Notepad.
  2. 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.

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

  4. 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.
  5. Save the file as C:\SelectDemo.htm.

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.

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


Properties

Retired KB Content Disclaimer
This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

↑ Back to the top


Keywords: KB315655, kbhowtomaster, kbhowto

↑ Back to the top

Article Info
Article ID : 315655
Revision : 2
Created on : 5/12/2003
Published on : 5/12/2003
Exists online : False
Views : 354