List Boxes

List boxes or drop-down list boxes are controls that typically display several items in a list. Sometimes they have an arrow next to them that enable the user to scroll down to additional items. They work a little different in HTML because they're created with two elements: <select> and <option>. Essentially, they provide the same functionality as the radio buttons, given that usually you can only select one item from a predetermined list of options.

The <select> element that creates the list box encloses a number of <option> elements, each of which contains the text that corresponds to an item on the drop-down list:

<select name="Price">
    <option>Under $5,000</option>
    <option>$5,000–$10,000</option>
    <option>$10,000–$25,000</option>
    <option>Over $25,000</option>
</select>

However, there are times when being able to select several items is appropriate, and you can allow multiple items to be selected by adding the multiple attribute to the <select> element. This gives PHP two things to think about. You'll deal with both of these options in the following example in which you get information from the user about the price of a car he wants to purchase and its engine size. The first question allows only single answer, and the second allows multiple items, which can be selected by holding down the Shift key.

Try it Out: Out Use a List Box

Start Example:
  1. Open your Web page editor and type in the following:

    <html>
    <head><title></title></head>
    <body>
    <form method="POST" action="listbox.php">
    What price of car are you looking to buy?
    <br>
    <br>
    <select name="Price">
        <option>Under $5,000</option>
        <option>$5,000-$10,000</option>
        <option>$10,000-$25,000</option>
        <option>Over $25,000</option>
    </select>
    <br>
    <br>
    What size of engine would you consider?
    <br>
    <br>
    <select name="EngineSize[]" multiple>
        <option>1.0L</option>
        <option>1.4L</option>
        <option>1.6L</option>
        <option>2.0L</option>
    </select>
    <br>
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    
  2. Save the file as listbox.html and close it.

  3. Create another new file and type in the following:

    <html>
    <head><title></title></head>
    <body>
    <?php
    echo "Price Range: $_POST[Price]";
    $Choice0 = $_POST['EngineSize'][0];
    $Choice1 = $_POST['EngineSize'][1];
    $Choice2 = $_POST['EngineSize'][2];
    $Choice3 = $_POST['EngineSize'][3];
    echo "<br>Engine Size(s): $Choice0";
    echo "$Choice1";
    echo "$Choice2";
    echo "$Choice3";
    ?>
    </body>
    </html>
    
  4. Save this file as listbox.php.

  5. Open listbox.html in your browser and select one option from the top box, and one or more from the bottom list box.

  6. Click Submit.

How it Works

In the first program, listbox.html, a list box is created with four items, and multiple selections are allowed. The <select> element's name attribute is set to Price:

<select name="Price">
    <option>Under $5,000</option>
    <option>$5,000-$10,000</option>
    <option>$10,000-$25,000</option>
    <option>Over $25,000</option>
</select>

In the second program, listbox.php, the name attribute is referred to with the PHP variable $-POST[Price]:

<?php
echo "Price Range: $_POST[Price]";
...

There's absolutely nothing out of the ordinary going on here, and it should look very familiar up to this point. It's on the second list box in listbox.html that things depart from the norm:

<select name="EngineSize[]" multiple>
    <option>1.0L</option>
    <option>1.4L</option>
    <option>1.6L</option>
    <option>2.0L</option>
</select>

Well, actually everything looks pretty much the same apart from the top line, which sets the name attribute to be EngineSize[]. Attaching the brackets([]) to the end of a control name is a cue to PHP to treat it as an array.

$Choice0 = $_POST['EngineSize'][0];
$Choice1 = $_POST['EngineSize'][1];
$Choice2 = $_POST['EngineSize'][2];
$Choice3 = $_POST['EngineSize'][3];
echo "<br>Engine Size(s): $Choice0,";
echo "$Choice1,";
echo "$Choice2,";
echo "$Choice3,";

As mentioned earlier, during the creation of an array, PHP creates a new variable of the same name with an index number bolted on. There are four items on the list, so there are four index numbers. The contents of each one must be displayed because each index number refers to an item in the array. Array indexes always start at zero, so $EngineSize[0] refers to the first option in the list, 1.0L. It contains this item only if that option is selected, otherwise it contains the contents of the first <select> option chosen on that page.

In this example, this option is selected, so $EngineSize[0] does indeed contain the value 1.0L. The same goes for $EngineSize[1] which relates to the second option. $EngineSize[2] and $EngineSize[3] don't contain anything because no more values were selected in the list box. If only one option were selected, then only $EngineSize[0] would contain a value. Only if all four options were selected would $EngineSize[2] and $EngineSize[3] contain any values. If only the last two items were selected, then the variables $EngineSize[0] and $EngineSize[1] would contain 1.6L and 2.0L, respectively. $EngineSize[2] and $EngineSize[3] still wouldn't contain any values. To easily display the values with the echo statement, variables for each choice were created and set them to the string values in the array variables.