Drop-Down Lists

The <select> tag defines a drop-down list from which items defined by <option> tags are selected. The general format for coding a drop-down list is shown below.

<select
  id="id"
  multiple
  size="n">
  <option value="string" selected >label</option>
  ...
</select>

Figure 9-12. General format for drop-down list.

Items appearing in the list are described with <option> tags enclosing the text labels appearing in the list. Values associated with the options can come from one of two sources. If a value attribute is coded within the <option> tag, then this is the value for the chosen option; otherwise, its value is given by the text label appearing between the <option> tags. Items can be pre-selected by coding selected in the associated <option> tag.

Normally, only one of the available options can be chosen. By specifying multiple in the <select> tag, multiple items can be chosen. The number of viewable items in the list is given by the size attribute. Multiple items are selected by using the Shift-Click or Ctrl-Click technique.

The following table lists selected scriptable properties and event handlers associated with drop-down lists.

Property	Description
length	The number of options in the list.
selectedIndex	The index number, beginning with 0, of the selected option.
options[]	An array or collection of the options in the list. Used to reference properties associated with the options; e.g., options[1].value or options[2].text.
disabled	A true or false value indicating whether the dropdown list is disabled. A disabled dropdown list is unusable and un-clickable.
value	The value associated with an option. In the absence of a coded value attribute, the text label associated with the option.
size	Sets or returns the size of a drop-down list.
multiple	Sets or returns whether more than one option can be selected from the drop-down list.
type	Returns the type of drop-down list - whether a single or multiple options can be selected.
Event Handler	Description
onfocus	The control gains focus.
onblur	The control loses focus.
onchange	A different option from the one currently displayed is chosen.
Methods	Description
add()	Adds an option to a drop-down list
remove()	Removes an option from a drop-down list.

Figure 9-13. Properties and event handlers for a drop-down list.

Determining Selected Items

When scripting drop-down lists, the intent is normally to determine which of the available options is selected and to take action on it. In the following example, a drop-down list contains three options. Each option contains a text label along with a value for the item. When an item is selected from the list and the "Select" button is clicked, the value associated with that option along with its text label are displayed in accompanying text boxes.

Select Menu: 
	This is Item 1
	This is Item 2
	This is Item 3
 

You selected item text:   
You selected item value: 

Figure 9-14. Determining a selected item and value from a drop-down list.

<script>
window.onload = init;

function init()
{
   var showItem = document.getElementById("bntShowItem");
   showItem.onclick = showItem;
}

function showItem()
{
   var index = document.getElementById("Menu").selectedIndex;
   document.getElementById("Text").value = document.getElementById("Menu").options[index].text;
   document.getElementById("Value").value = document.getElementById("Menu").options[index].value;
}

</script>

<b>Select Menu:</b>
<select id="Menu">
  <option value="item1">This is Item 1</option>
  <option value="item2">This is Item 2</option>
  <option value="item3">This is Item 3</option>
</select>
<input type="button" value="Select" id="btnShowItem">

You selected item text: <input id="Text" type="text">
You selected item value: <input id="Value" type="text">

Listing 9-10. Code to determine a selected item and value from a drop-down list.

The items (<option> tags) in a drop-down list are indexed beginning with 0. This index number for a chosen item is given by the selectedIndex property of the list. This index value is needed to reference the text label or value of the chosen item.

The text and value properties associated with a chosen option are extracted from an options array that is built from all the <option> tags present in the list. In general notation, the script references are to

dropDownList.options[dropDownList.selectedIndex].text
dropDownList.options[dropDownList.selectedIndex].value

When using actual scripting, the code can get a little messy. For the above example, references are to

document.getElementById("Menu").options[document.getElementById("Menu").selectedIndex].text
document.getElementById("Menu").options[document.getElementById("Menu").selectedIndex].value

To reduce the amount of coding, it is better to first capture the index value of the selected option as a variable; then use that variable as the array index. This is done in the above script by capturing the selectedIndex of the chosen item,

var Index = document.getElementById("Menu").selectedIndex

and using the Index variable to extract associated text and value properties from the options array:

document.getElementById("Menu").options[Index].text
document.getElementById("Menu").options[Index].value

Making Multiple Selections

When multiple selections are permitted, you need to use a different technique to discover which options are selected. You must iterate all items in the options array, checking the selected property of each item. This property is true for a selected option and false otherwise. In the following example, a for loop iterates the options array to check their selected properties and display their values.

Select Menu:
 
	This is Item 1
	This is Item 2
	This is Item 3
	This is Item 4
	This is Item 5
 

You selected item values: 

Figure 9-15. Determining multiple selected values from a drop-down list.

window.onload = init;

function init()
{
   var showItems = document.getElementById("bntShowItems");
   showItems.onclick = showItems;
}

function showItems()
{
   document.getElementById("values").innerHTML = "";
   for (i=0; i < document.getElementById("Menu").length; i++) {
     if (document.getElementById("Menu").options[i].selected == true) {
        document.getElementById("values").innerHTML += 
        document.getElementById("Menu").options[i].value + "<br/>";
     }
   }
}

<b>Select Menu:</b>
<select id="Menu" multiple size="3">
  <option value="item1">This is Item 1</option>
  <option value="item2">This is Item 2</option>
  <option value="item3">This is Item 3</option>
  <option value="item4">This is Item 4</option>
  <option value="item5">This is Item 5</option>
</select>
<input type="button" value="Select" id="btnShowItems">

<b>You selected items:</b>
<span id="values"></span>

Listing 9-11. Code to determine multiple selected values from a drop-down list.

Notice that the <select> list has multiple and size attributes. The number of options in the list is given by its length property, which is the value for ending the loop. If a particular element in the options array has a selected property of true, its value property is displayed.

The onchange Event Handler

Drop-down lists permitting single selections support the onchange event handler. A change event occurs when a different selection is made from what is showing as the current selection. In this case, it is not necessary to provide a separate button to call a function. It is called by the onchange event handler coded in the <select> tag.

Select Menu:
	This is Item 1
	This is Item 2
	This is Item 3

Figure 9-16. Using an onchange event handler for a drop-down list.

window.onload = init;

function init()
{
   var showItem = document.getElementById("ddlShowItem");
   showItem.onchange = showItemFunction;
}

function showItemFunction()
{
   var Index = document.getElementById("ddlShowItem").selectedIndex;
   document.getElementById("showItemSpan").innerHTML = "<b>You selected: </b>" +
      document.getElementById("ddlShowItem").options[Index].text;
}

<b>Select Menu:</b>
<select id="ddlShowItem">
  <option value="item1">This is Item 1</option>
  <option value="item2">This is Item 2</option>
  <option value="item3">This is Item 3</option>
</select>

<span id="showItemSpan"></span>

Listing 9-12. Code to use an onchange event handler for a drop-down list.

There is one peculiarity associated with using the onchange event handler for a drop-down list. When the page is first opened, the first option in the list is showing. Therefore, selecting this first option does not produce a change event—the selected option is not different from the displayed option. In fact, the item cannot be selected until a different option is first selected.

To circumvent this problem, you can code a "dummy" option as the first choice in the list so that the first "real" option is not displayed when the page opens. For example, consider the following drop-down list.

Select Menu:
	-- Select an option --
	This is Item 1
	This is Item 2
	This is Item 3

Figure 9-17. Selecting the first item in a drop-down list using the onchange event handler.

window.onload = init;

function init()
{
   var showItem = document.getElementById("ddlShowItem");
   showItem.onchange = showItemFunction;
}

function showItemFunction()
{
   var index = document.getElementById("ddlShowItem").selectedIndex;
   if (index != 0) {
     document.getElementById("showItemSpan").innerHTML = "<b>You selected: </b>" +
       document.getElementById("ddlShowItem").options[Index].text;
  }
}

<b>Select Menu:</b>
<select id="ddlShowItem">
  <option>-- Select an option --</option>
  <option value="item1">This is Item 1</option>
  <option value="item2">This is Item 2</option>
  <option value="item3">This is Item 3</option>
</select>

<span id="showItemSpan"></span>

Listing 9-13. Code to select the first item in a drop-down list using the onchange event handler.

Now, all options are selectable when the page opens. A condition test (Index != 0) is added to the script to ensure that the first item in the list is not reported as a valid selection. Notice in this example that <option> values are not coded. The value of the selection is give by the text label.

Using Drop-Down Lists for DHTML

Application of drop-down lists to DHTML settings for a page is shown in the following example. Font family, size, and color styles for the text on the current page are selectable from three lists.

Set Page Font
Family: 
  Arial
  Courier New
  Comic Sans MS
  Georgia
  Times New Roman
  Verdana
 Size: 
  8pt
  9pt
  10pt
  12pt
  14pt
 Color: 
  Black
  Blue
  Brown
  Green
  Orange
  Red
 

Figure 9-18. Selecting page text styles from drop-down lists.

window.onload = init;

function init()
{
   var SelectFont = document.getElementById("btnSelectFont");
   SelectFont.onclick = SetFont;
}

function setFont()
{
   var familyIndex = document.getElementById("Family").selectedIndex;
   document.body.style.fontFamily = 
     document.getElementById("Family").options[familyIndex].text;
  
   var sizeIndex = document.getElementById("Size").selectedIndex;
   document.body.style.fontSize = 
     document.getElementById("Size").options[sizeIndex].text;

   var colorIndex = document.getElementById("Color").selectedIndex;
   document.body.style.color = 
     document.getElementById("Color").options[colorIndex].text;
}


<h4>Set Page Font</h4>
<b>Family:</b>
<select id="Family">
  <option selected>Arial</option>
  <option>Courier</option>
  <option>Comic Sans MS</option>
  <option>Georgia</option>
  <option>Times New Roman</option>
  <option>Verdana</option>
</select>

<b>Size:</b>
<select id="Size">
  <option>.67em</option>
  <option>.75em</option>
  <option selected>.83em</option>
  <option>1em</option>
  <option>1.2em</option>
</select>

<b>Color:</b>
<select id="Color">
  <option selected>Black</option>
  <option>Blue</option>
  <option>Brown</option>
  <option>Green</option>
  <option>Orange</option>
  <option>Red</option>
</select>

<input type="button" value="Select" id="btnSelectFont">

Listing 9-14. Code to select page text styles from drop-down lists.

Standard page settings are pre-selected in the drop-down lists by coding selected for the associated <option> tags. The text properties of the lists are actual font family, size, and color style values. Therefore, these selections can be applied directly as fontFamily, fontSize, and color style properties of the document body.

TOP | NEXT: Radio Buttons