Select
Content
Basics
A select object is one of the few form elements that is not implemented by using the INPUT tag. The code for a typical select, in which items are contained in a drop-down menu, is:
<SELECT> <OPTION>option a</OPTION> <OPTION>option b</OPTION> <OPTION>option c</OPTION> <OPTION>option d</OPTION> </SELECT>
Another option, which is unusual, is an open list that enables the user to scroll to see multiple options at once. In some instances, a list is set up to enable the user to select multiple items by using command-click.
In either instance, there should be at least two options for the user to choose within the select object. Also, an option should not be used outside of the context of a select object, nor should any HTML code be used among or within the options.
Usage
A select object provides a drop-down menu or scrolling list of options for the user to choose from. It's also worth noting that the user can navigate the content of the list by using the keyboard: arrow keys to scroll through the list, or a keystroke to jump to the first option that begins with a given character.
Processing
A normal select object passes a name=value pair to the server in which the value represents the item that was selected at the instant the form was submitted.
If the user is able to select multiple items, it gets a bit weird. Most browsers will pass multiple name=value pairs, one for each item selected, like this"
select_name=value&select_name=value&select_name=value
This is a bit of a bother, as it requires you to go back to the input string and parse it again, to put the items into an array, thus:
@in = split(/[&;]/,$in); # presuming $in has been loaded with the input string
foreach $i (0 .. $#in) {
$in[$i] =~ s/\+/ /g;
($key, $val) = split(/=/,$in[$i],2);
$key =~ s/%([A-Fa-f0-9]{2})/pack("c",hex($1))/ge;
next unless ($key eq 'select_name');
$val =~ s/%([A-Fa-f0-9]{2})/pack("c",hex($1))/ge;
$select_name[@select_name] = $val;
}
After running this, @select_name is an array of all the values selected in the select_name element.
HTML Attributes
The select object itself has the following attributes:
- NAME - The name of the name=value pair is assigned to the select object.
- SIZE - Causes the selector to display as a list (revealing the specified number of options) rather than a drop-down.
- MULTIPLE - Enables the user to choose multiple values.
- DISABLED - Grays out the selector and prevents the user from changing it.
- ACCESSKEY - A shortcut key to put focus on the element.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
Each option has the following attributes:
- VALUE - The value of the name=value pair is assigned to the select object.
- SELECTED - Causes the option to be selected by default.
An option group has the following attributes:
- LABEL - The text to display.
JavaScript
This covers the attributes of the select object and its options. I've not found a good resource for option groups, and haven't needed to goof with them as yet.
Properties
- length - An integer indicating the number of options within the selector.
- multiple - An boolean indicating whether multiple items can be selected.
- size - An integer indicating the size of the selector, when displayed as a scrolling list.
- options - An array of the options, as objects.
- selectedIndex - The index (corresponding to the options array) of the option currently selected.
- option.text - The text that displays for the option.
- option.selected - The value assigned to the option (same as its text unless otherwise specified).
- option.selected - Indicates whether an option is currently selected.
- option.defaultSelected - Indicates whether an option is set as the default selection.
Methods
- add(option,location) - Inserts an option (as an object) at the location specified, shifting all following options backward in the array If the location is not specified, it will be added to the end.
- remove(index) - Removes the option at the index specified.
Event Handlers
- onchange - Takes effect when the value is changed (an option is selected)
- option.onselect - Takes effect when the option is selected
Misc Notes
Whether to use a selector or a set of radio buttons will depend on the specific nature of the data you're looking to collect. The advantage to a selector is that it tends to be more compact, which is important if there are a lot of options to both design and accessibility.
A good practice is to provide options in alphabetical order to facilitate keyboard navigation - the user can click a key to jump to the first option beginning with that character, then again for the next. If there are few options, this may not be that valuable, and a better approach might be to place the most commonly-chosen items nearest the top to reduce the amount of tabbing or mouse-movement needed.
Note that the keyboard navigation is single-character. If the user types 'k' then 'e', they will jump to the first option starting with 'k' then jump to the first option starting with 'e', and not the first option starting with 'ke'. This is counter-intuitive, but it's a standard behavior.
The MULTIPLE attribute is not designed to take any argument. Some sources have suggested you can pass a number as an argument to indicate the maximum number of items a user can choose, but this is not standard and may not be widely supported. A JavaScript hack will be needed to restrict the number of items the user may select.
Also on MULTIPLE, if the number of options is small, it's generally better to use a series of checkboxes than a scrolling list, as the former is more intuitive.