List Boxes

As in Windows forms, you use list boxes to create a control that allows single or multiple selection of items. You can see both a single-selection list box (at left) in Figure 17.3 and a multiple-selection list box (at right) in the ListBoxes example on the CD-ROM.

Figure 17.3: A list box.

Tip

How do you make multiple selections in a list box? The same way as you would in other Windows controls—you can use the Shift key with the mouse to select a range of items, or the Ctrl key to select multiple items, clicking one after the other.

You use the Rows property to specify the height of the control. To enable multiple item selection, you set the SelectionMode property to ListSelectionMode. Multiple. You can find the selected item in a single-selection list box with the SelectedItem and SelectedIndex properties. The SelectedItem property returns the selected item as a ListItem object, which supports Text, Value, and Selected properties—see "Using the ListItem Class" in Chapter 16. In multiple-selection list boxes, you loop over the Items collection of ListItem objects, checking each item's Selected property to see if that item is selected.

List boxes are supported with the HTML <select> control. Here's the HTML that creates the single-selection list box you see at left in Figure 17.3:

<select name="ListBox1" id="ListBox1" size="4"
onchange="__doPostBack('ListBox1','')" language="javascript"
style="height:142px;width:176px;Z-INDEX: 101; LEFT: 38px;
POSITION: absolute; TOP: 41px">
    <option value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option value="Item 3">Item 3</option>
    <option value="Item 4">Item 4</option>
</select>

The HTML for the multiple-selection list box at right in Figure 17.3 is almost the same, except for the addition of the multiple attribute (this attribute is a standalone attribute which means you don't have to assign it a value, but following the lead of the XHTML specification, Visual Basic assigns it the value "multiple" to make the HTML more compatible with XML, which does not support standalone attributes):

<select name="ListBox2" id="ListBox2" size="4" multiple="multiple"
onchange="__doPostBack('ListBox2','')" language="javascript"
style="height:134px;width:188px;Z-INDEX: 103; LEFT: 248px;
POSITION: absolute; TOP: 40px">
    <option selected="selected" value="Item 1">Item 1</option>
    <option value="Item 2">Item 2</option>
    <option selected="selected" value="Item 3">Item 3</option>
    <option selected="selected" value="Item 4">Item 4</option>
</select>