Requirements
The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:- Internet Explorer 5.01 or later
- HTML
- JScript
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:This code creates two select boxes named possible and wishlist.
<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> - Add the following code after the last <SELECT> end tag and before the <BODY> end tag to add two buttons to the HTML page:Notice that these buttons call the MyMoveItem function, which moves selected items from one select box to another select box.
<INPUT TYPE="BUTTON" VALUE="Add to wishlist" ONCLICK="MyMoveItem(possible,wishlist);"> <INPUT TYPE="BUTTON" VALUE="Remove from wishlist" ONCLICK="MyMoveItem(wishlist,possible);"> - Add the following code after the last <SELECT> end tag and before the <BODY> end tag to add two buttons to the HTML page:
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.
<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> - Save the file as C:\SelectDemo.htm.
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.
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