Forms - JavaScript: Novice to Ninja - page 274

A good roundup of all the new form elements can be found in this article on
SitePoint.
Select Drop-down List
Select drop-down lists can be used to select one or more options from a list of values. The
multiple attribute is required if more than one option is to be selected. We'll use one in
our example to choose the city where our hero operates. Add the following line of code to
the form in hero.htm:
<label for="City" class="break">Base of
Operations:</label>
<select name="city">
<option value="" selected>Choose a City</option>
<option value="Metropolis">Metropolis</option>
<option value="Gotham City">Gotham City</option>
<option value="Keystone City">Keystone City</option>
<option value="Coast City">Coast City</option>
<option value="Star City">Star City</option>
</select>
Note that the selected attribute can be used to set the initial value in the HTML. In this
example, the blank option that provides the instructional message “Choose a City” has this
attribute, so it is shown when the page loads.
The name attribute of the <select> element is used to access it in JavaScript:
form.city;
If only one item was selected, this will return a reference to that selection; otherwise a col-
lection will be returned containing each selection.
Each selection object has a value property that returns the value attribute of the <op-
tion> tag that was selected. Add the following code to the makeHero() function to set
the city property:
hero.city = form.city.value;