Web Design in a Nutshell, 3rd Edition

Scrolling menus

To make the menu display as a scrolling list, simply specify the number of lines you’d like to be visible in the list using the size attribute, or add the multiple attribute to the select element, as shown in the following markup and in Figure 15-13. The multiple attribute makes it possible for users to select more than one option from the list.

    <p>What are your favorite ice cream flavors?</p>
    <select name="ice_cream"size="6" multiple="multiple">
    <option>Rocky Road</option>
    <option>Mint Chocolate Chip</option>
    <option>Pistachio</option>
    <option selected="selected">Vanilla</option>
    <option selected="selected">Chocolate</option>
    <option value="swirl">Fudge Ripple</option>
    <option>Super-duper Praline Pecan Smashup</option>
    <option>Bubblegum</option>
    </select>

This example also uses the selected attribute to preselect options and the value attribute for providing a value for the option that is different from the displayed text.

Figure 15-13. Use the size attribute to display a select menu as a scrolling list