JS Select and Transfer navigation menu sample code _javascript Tips

Implementing the HTML interface

<! DOCTYPE html>
 
 

Implementing Menu Navigation

Window.onload = initform;
Window.onunload = function () {};
function initform () {
document.getElementById ("NewLocation"). SelectedIndex = 0;
document.getElementById ("NewLocation"). onchange = Jumppage;
}
function Jumppage () {
var newloc = document.getElementById ("NewLocation");
var newpage = newloc.options [Newloc.selectedindex].value;
if (newpage!= "") {
window.location = newpage;
}
}

The following is the source analysis
1.

Window.onload = initform;
Window.onunload = function () {};
When the window loads, the initform () function is invoked. The next line needs to be explained, because it is a workaround for dealing with the odd behavior of some browsers.

When the window is unloaded (that is, the window is closed or the browser is switched to another URL), we call an anonymous function (anonymousfunction), a function without a name. In this example, this function does not have a name, and does nothing at all. This function is provided because the onunload must be set to something, otherwise the OnLoad event is not triggered when the browser's Back button is clicked, because pages are cached in some browsers, such as Firefox and Safari. Having onunload perform any action causes the page to not be cached, so the OnLoad event occurs when the user is back.

Anonymous means that there is no name between the function and (). This is the easiest way to trigger a onunload but not let it do anything. As in any function, curly braces contain the contents of a function. The curly braces here are empty because this function doesn't do anything.

2.

document.getElementById ("NewLocation"). SelectedIndex = 0;
document.getElementById ("NewLocation"). onchange = Jumppage;
In the initform () function, the first line gets the menu on the HTML page (its ID is newlocation) and sets its SelectedIndex property to zero, which causes it to display select a topic.
The second line lets the script invoke the Jumppage () function when the menu selection changes.

3.

var newloc = document.getElementById ("NewLocation");
In the Jumppage () function, the Newloc variable finds the value that the visitor selects in the menu.

4.

var newpage = Newloc.options[newloc.selectedindex].value;
Start with the code in square brackets and parse it out in turn. Newloc.selectedindex is a number from 0~5 (since there are 6
menu options. Remember that JavaScript numbers are often based on zeros. After this number is obtained, the corresponding menu item is then obtained
Value, which is the name of the page we want to jump to. The result is then assigned to the variable newpage.

5.

if (newpage!= "") {
window.location = NewPage;
This conditional statement first checks whether the NewPage is non-null. In other words, if newpage has a value, then let the window go to the
The URL specified by the selected menu item.