Using JavaScript, you can launch a second window in your application. The code can be tied to an HTML listbox so that when a user selects an item from the list, the corresponding window appears.
The following sample code uses a single listbox and a single JavaScript function that does the work. At the heart of the function is the intrinsic 'open()' function, which actually opens the new page. The 'open()' method accepts a number of parameters, including the new page to open, a name, and page options. In the following line of code, 'jumpToHere' is a variable that contains the URL of the new page that is to be opened. "MyWindow" is the name of the newly opened page, and winOptions is a string variable containing a number of options that describe how the newly opened window will appear.
popUpWindow = open(jumpToHere, "MyWindow", winOptions);
The 'open()' function is contained within the 'OpenNewWindow()' function. The 'OpenNewWindow()' function accepts as its sole parameter an object reference pointing to the listbox that called the function. The following line shows the function declaration:
function OpenNewWindow(myListBox)
Note that 'myListBox' contains an object reference that refers to the HTML listbox that called 'OpenNewWindow()'. The object variable can be used from inside the function to manipulate the listbox and retrieve the currently selected item. The following line of code uses the '.value' property of the currently selected item to return the text value into a variable. This variable will be used as the URL of the window to jump to. The '.selectedIndex' property is used to determine which item in the listbox has been selected.
jumpToHere = myListBox[myListBox.selectedIndex].value;
The code that handles calling the 'OpenNewWindow()' function is a single line which I've included in the HTML listbox declaration. The following line of code will be executed whenever the user selects a new item in the listbox. Notice that this line is really two code fragments separated by a semi-colon. Using this technique, your application can execute multiple code fragments on a single event. The first code fragment calls the 'OpenNewWindow()' function and passes to it the intrinsic variable named 'this', which refers to the page element that triggered the event. In this case, the event was triggered by the HTML listbox, and a reference to the listbox will be contained within 'this'. The function 'OpenNewWindow()' will use the object reference to manipulate the listbox and to retrieve information from it.
The second code fragment also uses 'this'. In this case, I am setting the '.selected' property to 'true' for the first item in the listbox. The items in the listbox are zero-based, so setting '.selected' to 'true' for item zero selects the first item in the listbox.
onChange="OpenNewWindow(this);this[0].selected=true"
The complete code is below. Feel free to use and modify this code in your own applications. This code works in both Internet Explorer 4.0 and Netscape Navigator 4.5.
<HTML>
<HEAD>
<TITLE>My JavaScript Menu</TITLE>
<SCRIPT language="JavaScript">
function OpenNewWindow(myListBox)
{
var jumpToHere;
var winOptions;
var popUpWindow;
jumpToHere = myListBox[myListBox.selectedIndex].value;
winOptions = "top=100, left=100, width=500, height=250";
popUpWindow = open(jumpToHere, "MyWindow", winOptions);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ff0000">
<H1 ALIGN="CENTER">My JavaScript Menu</H1>
<FORM name="MyForm">
<DIV align=center>
<SELECT
name="lstListBox"
onChange="OpenNewWindow(this);this[0].selected=true">
<OPTION selected>Select a Page
<OPTION value="MyPage1.htm">Open This 1
<OPTION value="MyPage2.htm">Open This 2
<OPTION value="MyPage3.htm">Open This 3
<OPTION value="MyPage4.htm">Open This 4
</SELECT>
</DIV>
</FORM>
</BODY>
</HTML>
See this code in action
