HTML and CSS Reference
In-Depth Information
Table 9-22 selectedIndex Property
General form:
var varname=formName.SelectListName.selectedIndex
where varname is a variable, formName is the identifier of the form that holds the select list,
SelectListName is the name of the select list, and selectedIndex is a property that returns an
integer corresponding to the position of the item in the list
var menuSelect=myForm.Menu.selectedIndex
As you learned in earlier chapters, the text that appears for each item in a select
list is enclosed in <option> tags. The option tag also supports a value attribute, as shown
in the code in Figure 9-9. The value in the value attribute describes the item and can be
assigned to a variable.
values from
form passed to
loadInfo() function
code to assign
selectedIndex value
to build URL
this.form refers to
the announceMenu
location property
opens web page
at new URL
select list options
for URL names
option value
Figure 9-9 Relationship between HTML form object and JavaScript function.
This variable can then be used to assign the new Web page location to the window's
location property. This statement will load a new URL into the browser. Table 9-23 shows
the general form of the location property.
Table 9-23 Location Property
General form:
object=window.location or window.location=URL
where object is a variable or some other object that can display the URL of the current window,
and URL is the address of the Web page to display. The use of the window object is optional.
In order to use a select list as navigation, you need to create a function that will
determine which option the user selects and results in the chosen page being loaded in
the browser. Table 9-24 shows the JavaScript code for a loadInfo() function that uses the
selected value to determine which item in a list was selected, assigns the value attribute for
that item, and then uses that variable to create a URL.
Search WWH ::

Custom Search