19.6 Combo Boxes and List Boxes

A SELECT element presents a set of options to the user . If only a single entry can be selected and no visible size has been specified, the options are presented in a combo box (drop-down menu); list boxes are used when multiple selections are permitted or a specific visible size has been specified. The choices themselves are specified by OPTION entries embedded in the SELECT element. The typical format is as follows :

 <SELECT NAME="  Name  " ...>   <OPTION VALUE="  Value1  ">  Choice 1 Text  <OPTION VALUE="  Value2  ">  Choice 2 Text  ...   <OPTION VALUE="  ValueN  ">  Choice N Text  </SELECT> 

The HTML 4.0 specification also defines OPTGROUP (with a single attribute of LABEL ) to enclose OPTION elements to create cascading menus .

HTML Element: <SELECT NAME="..." ...> ... </SELECT>

Attributes: NAME (required), SIZE , MULTIPLE , ONCLICK , ONFOCUS , ONBLUR , ONCHANGE

SELECT creates a combo box or list box for selecting among choices. You specify each choice with an OPTION element enclosed between <SELECT ...> and </SELECT> .

NAME

NAME identifies the form to the servlet, JSP page, or other server-side program.

SIZE

SIZE gives the number of visible rows. If SIZE is used, the SELECT menu is usually represented as a list box instead of a combo box. A combo box is the normal representation when neither SIZE nor MULTIPLE is supplied.

MULTIPLE

The MULTIPLE attribute specifies that multiple entries can be selected simultaneously . If MULTIPLE is omitted, only a single selection is permitted. From a servlet, you would use request.getParameterValues to obtain an array of the entries selected in the list. For example, the code

 String[] listValues = request.getParameterValues("language"); if (listValues != null) {   for(int i=0; i<listValues.length; i++) {     String value = listValues[i];     ...   } } 

would allow you to process all values selected in a list named language (see Listing 19.8). Be aware that the order of the values in the returned array may not correspond to the order of the values displayed in the list.

Core Approach

If multiple selections are possible in a SELECT list, then use request.getParameterValues to obtain an array of all selected items.

ONCLICK, ONFOCUS, ONBLUR, and ONCHANGE

These nonstandard attributes are supported by browsers that understand JavaScript. They indicate code to be executed when the entry is clicked, gains the input focus, loses the input focus, and loses the focus after having been changed, respectively.

HTML Element: <OPTION ...> (End Tag Optional)

Attributes: SELECTED , VALUE

This element specifies the menu choices; it is valid only inside a SELECT element.

VALUE

VALUE gives the value to be transmitted with the NAME of the SELECT menu if the current option is selected. This is not the text that is displayed to the user; that is specified by separate HTML markup listed after the OPTION tag.

SELECTED

If present, SELECTED specifies that the particular menu item shown is selected when the page is first loaded.

Listing 19.8 creates a menu of programming language choices. Because only a single selection is allowed and no visible SIZE is specified, it is displayed as a combo box. Figures 19-16 and 19-17 show the initial appearance and the appearance after the user activates the menu by clicking on it. If the entry Java is active when the form is submitted, then language=java is sent to the server-side program. Notice that it is the VALUE attribute, not the descriptive text, that is transmitted.

Listing 19.8 Example of a SELECT menu

 Favorite language: <SELECT NAME="language">   <OPTION VALUE="c">C   <OPTION VALUE="c++">C++   <OPTION VALUE="java" SELECTED>Java   <OPTION VALUE="lisp">Lisp   <OPTION VALUE="perl">Perl   <OPTION VALUE="smalltalk">Smalltalk </SELECT> 

Figure 19-16. A SELECT element displayed as a combo box (drop-down menu).

Figure 19-17. Choosing options from a SELECT menu.

The second example shows a SELECT element rendered as a list box. If more than one entry is active when the form is submitted, then more than one value is sent, listed as separate entries (repeating NAME ). For instance, in the example shown in Listing 19.9 (Figure 19-18), language=java&language=perl gets added to the data being sent to the server. Multiple entries that share the same name is the reason servlet authors need to be familiar with the getParameterValues method of HttpServletRequest in addition to the more common getParameter method. See Chapter 4 (Handling the Client Request: Form Data) for details.

Listing 19.9 Example of a SELECT menu that permits selection of multiple options

 Languages you know:<BR> <SELECT NAME="language"  MULTIPLE  >   <OPTION VALUE="c">C   <OPTION VALUE="c++">C++   <OPTION VALUE="java" SELECTED>Java   <OPTION VALUE="lisp">Lisp   <OPTION VALUE="perl" SELECTED>Perl   <OPTION VALUE="smalltalk">Smalltalk </SELECT> 

Figure 19-18. A SELECT element that specifies MULTIPLE or SIZE results in a list box.

HTML Element: <OPTGROUP ...> ... </OPTGROUP>

Attributes: LABEL (required)

This element, supported by Netscape 7.0 and Internet Explorer 6.0, permits grouping of menu choices. It is valid only inside a SELECT element.

LABEL

LABEL gives the text to display for the group of menu choices. Netscape and Internet Explorer display the label in bold text, using an oblique font.

Listing 19.10 creates a menu of server-side language choices. Here the menu choices are categorized into two groups by the OPTGROUP element. The first group is Common Servlet Languages, and the second group is Common CGI Languages. Figure 19-19 shows the displayed menu with Java selected for the common CGI language. For this selection the request data sent to the server is language=java . Be aware that no additional information is sent to the server by Netscape and Internet Explorer to indicate which OPTGROUP choice was selected. As a result, you should use unique values for all the menu choices, regardless of group.

Figure 19-19. A SELECT element using OPTGROUP to group menu choices in Netscape 7.0.

Core Approach

When using multiple OPTGROUP elements, ensure that all OPTION s use a unique name for the VALUE .

Listing 19.10 Example of a SELECT menu categorized into two groups with the OPTGROUP element

 Server-side Languages: <SELECT NAME="language">  <OPTGROUP LABEL="Common Servlet Languages">  <OPTION VALUE="java1">Java   </OPTGROUP>  <OPTGROUP LABEL="Common CGI Languages">  <OPTION VALUE="c">C     <OPTION VALUE="c++">C++     <OPTION VALUE="java2">Java     <OPTION VALUE="perl">Perl     <OPTION VALUE="vb">Visual Basic </OPTGROUP> </SELECT>