Each option in this menu points to a page or a part of a page; the file name or the entire URL of the page (the anchor name of the part of the page) is assigned to attribute value in each <option> tag, and the description of the page (or its part) is specified after that <option> tag. Feel free to expand or shorten the list of options by adding more <option> tags or erasing some.
And here is the source of the above example:
If you don't like the "pop-up" nature of the menu and would prefer the
options to be displayed in a scrolling list, simply add multiple attribute
to the <select> tag. By adding size=number to the same tag
you can specify how many options should be visible in the scrolling list.
The menu whose <select> tag is
<select name="menu2_select" multiple size=3>
looks like this:
A bit of theory
Last week we learned what event handlers are and how they are used.
Here the event handler onClick is used. It is the event handler of the objects:
button, checkbox, radio, link, reset and submit.
This means that it handles events that are generated when the user
clicks a button, a checkbox, a radio button, a submit buttom or a reset button.
In our example it is used as the evenet handler of the button object.
So we add it as an attribute of the tag that creates the button labeled "Go!",
with the code assigned that is executed when the user clicks the button.
The code
window.location=menu_form.menu_select.options[menu_form.menu_select.selectedIndex].value
is an assigning of one object's property to another property of another
object. The properties here behave like variables, which means that
to the property location (location of the document viewed in browser) of the object window
is assigned the value of
the property value (string that reflects the value attribute of its object
which is specified as a value assigned to the <value>
attribute of the corresponding HTML tag) of the object option
which is accessed through the notation
menu_form.menu_select.options[menu_form.menu_select.selectedIndex].
Here you can see that some properties of objects are actually another objects:
The object form has the property-object select which has the property
options that is actually the options array object.
As well as any other array, this one can also be indexed and we index it with
the value of the selectIndex (the index of the option selected - first option has index 0) property of the select object.
Note that you refer to certain objets like form and select
with the name that you have assigned to the attribute name of the HTML tag.
The complete list of JavaScript objects and their properties can be found on Netscape's www site.
Feel free to contact the author of this page concerning this technique or any other
JavaScript problem, or just to say how you like these pages.
Please visit this page again in a week when a new technique will be presented.
This page hosted by
.
Get your own Free Home Page