JavaScript Tip of the Week for September 2, 1996: What's New in 3.0 | WebReference

JavaScript Tip of the Week for September 2, 1996: What's New in 3.0

JavaScript Tip of the Weekfor September 2, 1996: Modifiable Select Menus II

One of the new features is Netscape 3.0 is the ability to change certain form elements, namely the select menu, right on the page. This can be used to create some very useful JavaScript apps. Take a look at the Modifiable Select Menu II. This little JavaScript program capitalizes on the new select menu feature. It saves a lot of space and while organizing a lot of information. The new version can go to any length and changes its size to correspond with length of the options.

To use this little app, select one of the items in the category menu. It will in turn create a list of sites in the select menu to the right of it. The sites and their respective URLs are located in a bunch of easy-to-use arrays.

The basic syntax for modifying a select menu on the fly looks like this:
    document.form_name.select_name.options[option_number] = new Option ("text");
Where text is what you want the option to display. You should know that select menus, as well as most other form elements, are indexed in arrays. So the first option in the select menu is called option[0], and the second is option[1] and so on. That's what option_number is asking for. Anyhow, to create a select menu like the one above, you first need to specify the maximum length of the options and what will be displayed in the initial options.
    var maxLength = 10;                <-- maximum length of options
    siteopt = new Array;               <-- The initial options for the
    siteopt[0] = "Browse Past Tips";       secondary menu are put here
    siteopt[1] = "This Week";    
    siteopt[2] = "E-Mail";
    siteopt[3] = "JavaScript Powered Tour";
    siteopt[4] = "Tippettes";
    var trueLength = siteopt.length;   <-- The true length of the initial options 
    var lst = siteopt.length;              is automatically determined
    url = new Array;                   <-- The urls that correspond to the initial
    url[0] = "/tip_week_past.html";        options
    url[1] = "/this_week/index.html";
    url[2] = "/e-mail.html";
    url[3] = "/960617/index.html";
    url[4] = "/tippettes.html";
    catopt = new Array;                <-- The permanent options for the primary 
    catopt[0] = "Tip Related";             select menu are put here
    catopt[1] = "Site Features";
    catopt[2] = "JavaScript Sites";
    catopt[3] = "Favorite Tips";
Now, you need to create arrays for all of your other options and urls. This is done in a different way than in the initial arrays. The initial arrays are just plain old arrays, what needs to be created now are actual option objects stored in the form of arrays. These arrays and their option objects are put in the function that changes the select menu. This function, changeMenu() does three things: creates a list of option objects that corresponds to what you select in the primary menu, deletes the old options off the page in reverse order, and displays the new options in the secondary menu.
    function changeMenu()
    siteopt.length = 0;
    menuNum = document.SelectMenu.SelectPrimary.selectedIndex; 
        if (menuNum == null) return;
        if (menuNum == 0) 
        siteopt = new Array;
        siteopt[0] = new Option("Browse Past Tips");  <-- The new option objects
        siteopt[1] = new Option("This Week");
        url = new Array;
        url[0] = "/tip_week_past.html";               <-- The urls corresponding
        url[1] = "/this_week/index.html";                 to the option objects
        if (menuNum == 1)
        siteopt = new Array;
        siteopt[0] = new Option("Technology Showcase!");
        etc ...
This is the first part of changeMenu(). As you can see, it first determines which option was chosen on the primary menu and sets that value to menuNum. Then, if statements are used to determine which set of options should be created. If "Tip Related" is chosen, menuNum equals zero and the first set of options is created. If "Site Features" is chosen, menuNum equals one and the second set of options is created. After all of this is done, the last part of the function is run:
    tot = siteopt.length;
        for (i = lst; i > 0; i--) 
        { document.SelectMenu.SelectSecondary.options[i] = null; }
        for (i = 0; i < tot; i++)
        { document.SelectMenu.SelectSecondary.options[i] = siteopt[i]; }
        document.SelectMenu.SelectSecondary.options[0].selected = true;
    lst = siteopt.length;
Variable tot is set to the total number of the newly created option objects. Then, a for loop is used to delete the old options off the page. Its starts at the last option (determined by variable lst) and stops just before the first. The options must be deleted in reverse order, otherwise some will actually stay on the menu. This is a strange little bug, but its not a problem any more. Then, another for loop is used to add on the new options. Starting at zero and ending at the last option, tot.

Now you need a function to change the page when you have made your selection from the secondary menu.
    function changePage() 
    i = document.SelectMenu.SelectSecondary.selectedIndex;
    window.location.href = url[i];
This function is called when the jump button is pressed. If you want it to change automatically, you can put an onChange event handler in the select menu's tag to call changePage(). What changePage() does is determine which option has been selected from the secondary menu. It takes that value, gives it to the array url which has all the page locations in it, and changes the window's location to that page.

The last thing that needs to be done is print out the select menus. This should be done using JavaScript, that way you can make it print the menus for Netscape 3.0 and print out something else (or nothing) for other browsers.
with (document) {
writeln('<TR><TD COLSPAN = 3><FORM NAME = "SelectMenu">');
writeln('<FONT SIZE = 4 FACE = "Times">');
writeln('Modifiable Select Menu II</FONT>');
writeln('</TD></TR><TR><TD ALIGN = LEFT>');
writeln('<FONT SIZE = 2 FACE = "Times" >Category Menu</FONT><BR>');
writeln('<SELECT NAME="SelectPrimary" onChange="changeMenu(this.form)">');
tot = catopt.length; 
    for (i = 0; i < tot; i++)
    writeln("<OPTION>" +catopt[i]);
writeln('<FONT SIZE = 2 FACE = "Times" >Site Menu</FONT><BR>');
writeln('<SELECT NAME="SelectSecondary">');
    for (i = 0; i < maxLength; i++)
    writeln("<OPTION>" +siteopt[i]);
    for (i = maxLength; i > trueLength; i--) 
    { SelectMenu.SelectSecondary.options[i] = null; }
writeln('</TD><TD VALIGN = BOTTOM><A HREF = "javascript:changePage();">');
writeln('<IMG BORDER = 0 HEIGHT = 27 WIDTH = 70 SRC = "../jump1.gif"></A>');
You do not need to change any of the the code that prints out these menus, except of course for the title and the colors and such. I know for some of you this must be a trying tip to learn, but I hope you find it useful. I know did.