JavaScript 15: Select Lists

A select list is usually in a drop-down format and allows the user to select one of a number of items. There is one type of select element defined by the OPTION tag. They can generate focus, blur and change events.

My favourite soccer team is:


The SELECTED attribute sets the item to which the list is set when the form is loaded. JavaScript keeps a record of the index of each of the OPTION items on the form and lists them as an array, OPTION[0], OPTION[1] and OPTION[2]. JavaScript also records a property for the OPTIONS called selectedIndex which records the index of the array element selected by the user. The action taken includes the IMG tag and provides a picture of the team.

Another use of the SELECT object might be to provide a list of links from which the user chooses the one he wants.

  

This clearly has use for saving space on a page, providing a drop-down list instead of a permament list of links. You could make the list as long as you wish but it may become hard to read if you put more than 5 or 6 OPTION items in it.

Best Sites

In this example select lists have been arranged in a table to group together links to other sites in a very compact format. There is a separate function with its own name for each SELECT list and corresponding adjustments are made to the onClick event handlers at the end of each OPTION list.


Select your choice of www site from a drop-down list below then click on the GO button next to it.

Magazines: News:
Environment: Music:
Languages:

The Multiple Choice Vocabulary Tester

Choose the option you think is correct from each drop-down list.


Return to Javascript Menu