• Choose a category
• All
• Classic-Fiction

Flash

perl

onclick = ”showChoices()”>

Submit

The code isn’t shocking, but it does have some important features:

♦ Call the select object selLanguage. As usual, the form elements need an id attribute so that you can read it in the JavaScript.

♦ Add the multiple attribute to your select object. This attribute tells the browser to accept multiple inputs using Shift+click (for contiguous selections) or Ctrl+click (for more precise selection).

♦ Set the size to 10. The size indicates the number of lines to be displayed. I set the size to 10 because my list has ten options.

♦ Make a button. With multiple selection, you probably won’t want to trigger the action until the user has finished making selections. A separate button is the easiest way to make sure the code is triggered when you want it to happen.

♦ Create an output div. This code holds the response.

Writing the JavaScript code

The JavaScript code for reading a multiple-selection list box is a bit different than the standard selection code described in the section “Reading the list box” earlier in this chapter. The value property usually returns one value, but a multiple-selection list box often returns more than one result.

The key is to recognize that a list of option objects inside a select object is really a kind of array, not just one value. You can look more closely at the list of objects to see which ones are selected, which is essentially what the showChoices() function does:

At first, the code seems intimidating, but if you break it down, it’s not too tricky.

1. Create a variable to represent the entire select object.

The standard document.getElementById() technique works fine.

var selLanguage = document.getElementById(“selLanguage”);

2. Create a string variable to hold the output.

When you’re building complex HTML output, working with a string variable is much easier than directly writing code to the element.

var result = “

Your Languages<\/h2>”;

3. Build an unordered list to display the results.

An unordered list is a good way to spit out the results, so I create one in my result variable.

result += “

\n”;

4. Step through selLanguage as if it were an array.

Use a for loop to examine the list box line by line. Note that selLanguage has a length property like an array.

for (i = 0; i < selLanguage.length; i++){

5. Assign the current element to a temporary variable.

The currentOption variable holds a reference to the each option element in the original select object as the loop progresses.

currentOption = selLanguage[i];

6. Check to see whether the current element has been selected.

The object currentOption has a selected property that tells you whether the object has been highlighted by the user. selected is a Boolean property, so it’s either true or false.

if (currentOption.selected == true){

7. If the element has been selected, add an entry to the output list.

If the user has highlighted this object, create an entry in the unordered list housed in the result variable.

result += “

• ”