JavaScript Tip of the Week for September 23, 1996: Saving Space on Your Site | 2 | WebReference

JavaScript Tip of the Week for September 23, 1996: Saving Space on Your Site | 2

JavaScript Tip of the Weekfor September 23, 1996: Simple Select Menu

In the real world, there is never enough space; but that doesn't have to be true of the 'webbed' world. In my opinion, the select menu is the object of choice when you want to save space on a web page. Below is a simple select menu that will bring you to a page when you select an option. This will work on any JavaScript enabled browser. To create a select menu like this one, first create two arrays: one will contain the description that goes in the select menu and the other will contain the url that goes with that description:
    function MakeArray()
    {
    this.length = MakeArray.arguments.length
    for (var i = 0; i siteopt
= new MakeArray("Select a Page", "Browse Past Tips", "This Week", "E-Mail", "JavaScript Powered Tour", "Tippettes"); var url = new MakeArray("", "/tip_week_past.html", "/this_week/index.html", "/e-mail.html", "/960617/index.html", "/tippettes.html"); The first array, siteopt, stores the descriptions that will be displayed in the select menu. The second array, url, contains all of the urls that correspond to those descriptions. For instance choosing "Browse Past Tips" will bring you to "tip_week_past.html", because they are both second in each array. Just put your descriptions and urls in place of the ones I've included. You must also include the old MakeArray() function for these Netscape 2.0 arrays to work, it can be put it anywhere in the script.

Then, to automatically change the page when an option is selected, include this function in the head of the document:
    function jumpPage(form) {
    i = form.SelectMenu.selectedIndex;
    if (i == 0) return;
    window.location.href = url[i+1];
    }
It is important to note that all options in a select menu are indexed as arrays. If the first option is selected, then the program would read that option[0] was selected. If the second option is selected, the program would read that option[1] was selected, and so on. By matching up the option ( 0 for first, 1 for second, etc. ) that is selected, with a URL in the url array, jumpPage() is able to determine what page you selected and brings you to that page's URL.

Finally, to automate the display of this select menu just put these lines of JavaScript where you want the select menu to be displayed.
    document.writeln('<FORM><SELECT NAME="SelectMenu" onChange="jumpPage(this.form)">');
    tot = siteopt.length;
        for (var i = 1; i <= tot; i++)
        document.write("<OPTION>" +siteopt[i]);
    document.writeln('</SELECT>');
    if (navigator.userAgent.indexOf("Mozilla/2") != -1)
    document.writeln('<INPUT TYPE = BUTTON VALUE = "Jump!">');
    document.writeln('</FORM>');
That's all you need. This little JavaScript invention is easy to make and works without flaw; I like that in a tip.

Source