Using a menu to write a menu
You have seen that we can use a drop down menu, with a button or without one, to send
the browser to an URL, send email, load images, open pages in new windows, etc. You can
also use a menu to create a menu. This is important code to help you understand, among
other things, double-menus and triple menus. If you understand about menus, then
this page will be easy to understand.
Below are two menus: one menu contains a list of subjects, and the second on populates
with pages when a subject has been selected in the first menu. At first, there is only one
item in the second menu, which invites you to select a subject.
Try out the menus below and see how they work
The first menu, the subjects' menu, is a regular menu which is pre-written in the page.
The second menu is a regular menu with only one item - the one that says, "Select a
page after selecting the subject". The user selects a subject in the first menu and
the second menu populates with page names (at most 4, because I have tried to minimise the
details to make the code easier to understand).
When the user selects an item in the first menu, the menu calls a function called
"ldMenu(this.selectedIndex):
< select name="select1" onChange="ldMenu(this.selectedIndex);" size="1">
The select, therefore, calls the function and tells the function which item has been
selected. The function begins as follows:
function
ldMenu(mySubject) {
Indx=mySubject;
with (document,form2.select2)
{
The above bit simply introduces a variable called "Indx".
We also establish which item we are talking about. The function uses a
"with" statement to tell JavaScript that we are talking about
"document.form2.select2" throughout.
The next bit of code is used to clear the menu items, so that none are
left from the previous selection (if any). The length of the options is made zero:
document.form2.select2.options.length=0;
Next, we find out the value of Indx, by checking the possibilities.
If the Indx value is "0", then we write one option, "Pages appear here".
if (Indx==0)
{
options[0]=new Option("Pages
appear here","");
}
To write the new option, we use, surprisingly "new Option(". The first bit in
the brackets is the text that appears in the menu, and the second is the value of the
item. In this case, the value is "", or nothing. When the user clicks here,
nothing happens, which is what we want.
The next piece of code deals with the case when "Indx" is one. That is, the
subject is "JavaScript". The code we use to handle this is:
if (Indx==1){
options[0]=new Option( "Choose a
JavaScript Page","");
options[1]=new Option( "Alerts","alerts.htm");
options[2]=new Option( "Back and
Forward Buttons","BackForward.htm");
options[3]=new Option( "Contents","index.html");
}
In this code, the new options (after the first) have values which are the names of web
pages. The remaining if statements in the function follow the same pattern as this,
setting the items to the appropriate subjects.
When the user selects one of these, the second menu, menu 2, calles the function
"goToPage()", from the second select (select2):
onChange= "goToPage()"
"goToPage()" is a function to send the user to the selected page. It is just
like . The function is:
<script language= "JavaScript">
<!-- Hide from old browsers
//Hide from Java Script
function goToPage()
{
PageIndex2=document.form2.select2.selectedIndex
if (document.form2.select2.options[PageIndex2].value != "")
{
location.href = document.form2.select2.options[PageIndex2].value;
}
}
//-->
</script>
You will note that this function only works if there is a value in the option. So if
the first option is selected, nothing happens, because it is nothing ("").
Browsers
As it stands, the above code works fine in IE, and reasonably in Opera (it does not
change the size of the select when new items are selected.) Netscape, however, requires
"refreshes" to make the changes on the page. The following code is required to
refresh the browser if it is "Netscape":
if (navigator.appName == "Netscape") {
history.go(0)
}
You need to use this code whenever you want to make changes in the menus.
Summary
To write to a menu from another menu, you need only use "new Option(" to
create the menu items. While I have used "if statements" to find out which item
has been selected, you might prefer to use a "case statement".
The can help you write complex code by automatically inserting boilerplate code.
You can order the jsEditor online and download the full version immediately, so you can
use it to help you learn and develop scripts.
|
