JavaScript and Form Select Elements

This part of the JavaScript and Forms Tutorial answers these common questions regarding JavaScript and form select and option elements:

Examples and explanations are provided for each of these questions at the links listed above.

Basic Facts about Select Boxes

Form select boxes display a list of options, either as a drop-down menu or a list box. By default, select boxes only display one option at a time and allow selection of one option at a time. But a size attribute can be included to specify how many options will be visible, and a multiple attribute allows selection of more than one option in the list. The type property for a select object will either be select-one or select-multiple depending upon the presence or absence of the multiple attribute, which is a boolean attribute.

When you use JavaScript to interact with select boxes and options, you will most often be working with value, selectedIndex, and selected properties as well as the onchange event. The examples listed above demonstrate and describe the properties, and an example pizza order form demonstrates onchange event handling for both select-one and select-multiple type select lists.