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.
 
Search WWH ::




Custom Search