Java Reference
In-Depth Information
selection boxes
Although they look quite different, the drop‐down list and the list boxes are actually both elements
created with the
<select>
tag, and strictly speaking they are both select elements. The select
element has one or more options in a list that you can select from; each of these options is defined by
means of one or more
<option/>
elements inside the opening and closing
<select>
tags.
The
size
attribute of the
<select/>
element is used to specify how many of the options are visible
to the user.
For example, to create a list box five rows deep and populate it with seven options, your HTML
would look like this:
<select name="theDay" size="5">
<option value="0" selected="selected">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
Notice that the
<option/>
element for Monday also contains the attribute
selected
; this will make
this option selected by default when the page is loaded. The values of the options have been defined
as numbers, but text would be equally valid.
If you want this to be a drop‐down list, you just need to change the
size
attribute in the
<select/>
element to
1
, and presto, it's a drop‐down list.
If you want to let the user choose more than one item from a list at once, you simply need to add the
multiple
attribute to the
<select/>
definition.
The
<select/>
element creates an
HTMLSelectElement
object (hereby known as
Select)
. This
object has an
options
collection property, which is made up of
HtmlOptionElement
(hereby known
as
Option
) objects, one for each
<option/>
element inside the
<select/>
element associated with
the
Select
object. For instance, in the preceding example, if the
<select/>
element was contained
in a form called
theForm
with the following:
document.theForm.theDay.options[0]
you would access the option created for Monday.
How can you tell which option has been selected by the user? Easy: you use the
Select
object's
selectedIndex
property. You can use the index value returned by this property to access the
selected option using the
options
collection.
The
Option
object also has
index
,
text
, and
value
properties. The
index
property returns the
index position of that option in the
options
collection. The
text
property is what's displayed in the
list, and the
value
property is the value defined for the option, which would be posted to the server
if the form were submitted.