Web Development Tutorials




  
  

Drop-Down Lists

A drop-down list, presents a list of items from which one or more are chosen. By clicking the down-arrow at the right of the list, the full list is exposed. An item is chosen by clicking an entry.

Choose your favorite color:


Figure 10-23. A drop-down list.

The <select> and <option> Tags

The menu of choices is created with the <select> tag. Inside this tag are <option> tags, one for each item in the list. The general formats for the <select> and <option> tags are shown below.

<select
  id="id"
  name="name"
  size="n"
  multiple="multiple"
  disabled="disabled"
>
  <option
    value="text"
    selected="selected"
   disabled="disabled"
>
     Label
  </option>
  ...

</select>

Figure 10-24. General formats for <select> and <option> tags.

The id Attribute

An id can be assigned to a drop-down list if there is a need to identify it for browser script processing. Otherwise, an id is not needed.

The name Attribute

The drop-down list can be assigned a name with the name attribute coded in the <select> tag. The list name becomes associated with the value of the item selected for certain types of server processing.

The <option> Tag

Items are defined for appearance in a drop-down list with the <option> tag. There are as many tags as there are items in the list. The label for the option is entered between the opening and closing tags. This is the text string that is visible in the list and becomes the default value for the selection.

The value Attribute

By default, the value associated with a drop-down option is given by the text label included in the <option> tag. However, a value attribute can be coded to supply a different value from the label. You might choose to do this when the labels are extended text strings but you need only to collect abbreviated codes for the values.

The code below shows the basic tags and attributes needed to create a drop-down list. It produces the list shown above in Figure 10-23.

Choose your favorite color:<br>
<select id="Color">
  <option value="R">Red</option>
  <option value="G">Green</option>
  <option value="B">Blue</option>
  <option value="Y">Yellow</option>
  <option value="M">Maroon</option>
  <option value="P">Purple</option>
  <option value="A">Aqua</option>
  <option value="T">Teal</option>
</select>
    

Listing 10-17. Basic code for a drop-down list.

The size Attribute

The size attribute of the <select> tag indicates the number of items that are visible in the list. By default, the list displays only one item. If a size is specified, the list displays that number of items and, if necessary, a scroll bar to access them. A drop-down list that uses the size attribute or displays more than one option is often referred to as a selection list. The list shown below uses the attribute size="4" to display four items at a time.

Choose your favorite color:


Figure 10-26. A selection list permitting multiple selections.

The selected Attribute

Items in the list can be pre-selected by coding the selected="selected" attribute in the associated <option> tag. Multiple pre-selections can be made only when multiple="multiple" is coded for the <select> tag. The selection list in Figure 10-26 has three items (Red, Blue, Aqua) pre-selected.

The disabled Attribute

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The <optgroup> Tag

The items in a drop-down list can be grouped using the <optgroup> element. The tag includes a label attribute that is used to specify the label for each group of options in the list. The code below shows how the tag is used.

Select a Tree:<br>
<select id="Trees">
<optgroup label="Pines">
        <option value="Longleaf">Long Leaf Pine</option>
        <option value="Loblolly">Loblolly Pine</option>
</optgroup>
<optgroup label="Oaks">
        <option value="Red">Southern Red Oak</option>
        <option value="Live">Live Oak</option>
        <option value="White">White Oak</option>
        <option value="Scarlet">Scarlet Oak</option>
</optgroup>
<optgroup label="Elms">
        <option value="American">American Elm</option>
        <option value="Slippery">Slippery Elm</option>
</optgroup>
</select>
    
Select a Tree:

TOP | NEXT: Submit & Reset Buttons