• Choose a category
• All
• Classic-Fiction

value = “change color”

onclick = “changeColor()” />

The select object’s default behavior is to provide a drop-down list. The first element on the list is displayed, but when the user clicks the list, the other options appear.

A select object that the code refers to should have an id field.

In this and most examples in this chapter, I add CSS styling to clean up each form. Be sure to look over the styles if you want to see how I did it. Note also that I’m only showing the HTML right now. The entire code listing also includes JavaScript code, which I describe in the next section.

The other element in the form is a button. When the user clicks the button, the changeColor() function is triggered.

Because the only element in this form is the select object, you may want to change the background color immediately without requiring a button click. You can do so by adding an event handler directly onto the select object:

onchange = “changeColor()”>

The event handler causes the changeColor() function to be triggered as soon as the user changes the select object’s value. Typically, you’ll forego the user clicking a button only when the select is the only element in the form. If the form includes several elements, processing doesn’t usually happen until the user signals she’s ready by clicking a button.

Reading the list box

Fortunately, standard drop-down lists are quite easy to read. Here’s the JavaScript code:

As you can see, the process for reading the select object is much like working with a text-style field:

♦ Create a variable to represent the select object. The document.getElementById() trick works here just like it does for text fields.

♦ Extract the value property of the select object. The value property of the select object reflects the value of the currently selected option. So, if the user has chosen Yellow, the value of selColor is “#FFFF00”.

♦ Set the document’s background color. Use the DOM mechanism to set the body’s background color to the chosen value.

Managing Multiple Selections

You can use the select object in a more powerful way than the method I describe in the preceding section. Figure 6-2 shows a page with a multiple-selection list box.

To make multiple selection work, you have to make a few changes to both the HTML and the JavaScript code.

Figure 6-2: You can pick multiple choices from this list.

Coding a multiple selection select object

You modify the select code in two ways to make multiple selections:

♦ Indicate multiple selections are allowed. By default, select boxes have only one value. You’ll need to set a switch to tell the browser to allow more than one item to be selected.

♦ Make the mode a multiline select. The standard drop-down behavior doesn’t make sense when you want multiple selections, because the user needs to see all the options at once. Most browsers automatically switch into a multiline mode, but you should control the process directly.

The XHTML code for multiSelect.html is similar to the dropdownList page, described in the preceding section, but note a couple of changes.

Multiple Selections

Select the language(s) you know.

(ctrl-click to select multiple lines)

multiple = “multiple”

size = “10”>

XHTML

CSS

JavaScript

PHP

MySQL

Java

VB.NET

Python