My favorite animal is ...

This is a fairly complicated JavaScript, so let's go through it slowly. First, let's look at the form itself (note that your browser might wrap that onChange line, but it should be on one line, no spaces, inyour code):

<form name="the_form">
<select name="choose_category" 
  onChange="swapOptions
  (window.document.the_form.choose_category.
  options[selectedIndex].text);">
<option selected>Dogs
<option>Fish
<option>Birds
</select>

<select name="the_examples" multiple>
<option>poodle
<option>puli
<option>greyhound      .
</select>
</form>

This form has two elements, a pulldown select and a list select. The pulldown select has an onChange handler that calls a function called swapOptions(). swapOptions(), which is defined in the header, has one parameter - the selected animal type.

Now let's check out the header. The first thing that happens is I define a few arrays:

var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");

Notice that the arrays are named the same thing as the animals in the pulldown select. You'll see why soon. Now let's look at the function that gets called when the pulldown select is changed:

function swapOptions(the_array_name)
{
  var numbers_select = window.document.the_form.the_examples;
  var the_array = eval(the_array_name);
  setOptionText(window.document.the_form.the_examples, the_array);
}

The function definition includes one parameter: the_array_name. If you pulled the pulldown select to "Fish," the_array_name will equal the string "Fish."

The first line in the body of the function sets a variable to refer to the second form element, the list select.

The second line introduces something new: eval(). eval() is a little weird and better left for later lessons. The end result of the second line is that the variable the_array will equal one of the arrays defined earlier. If the_array_name is "Fish," the_array will equal the Fish array. If you want a description of how this happens, study up on eval.

The third line of the function calls another function called setOptionText(). setOptionText() does the work of setting the values of the list select to the contents of the_array. Here it is:

function setOptionText(the_select, the_array)
{
  for (loop=0; loop < the_select.options.length; loop++)
  {
    the_select.options[loop].text = the_array[loop];
  }
}

This function takes two parameters, a reference to a select element and an array. The first line of the function sets up a for loop, which loops through all the options in the select element. Remember that the options property of a select element is an array of all that select's options. Because it's an array, you can find out how many options are in a select using the length property of arrays. That's how the loop works.

The first time you hit the loop, the loop variable equals 0. The body of the loop then reads:

the_select.options[0].text = the_array[0];

If you chose "Fish" in the pulldown, the_array[0] will be "trout," so this line will change the first option in the list select to "trout." The next time through the loop, loop will equal 1, and the second option in the list select will equal "mackerel."

There's one caveat to all this. When you change the text of an option, the size of the select won't change. So if you change an option's text to something really long, it'll probably get cut off.

One way to get around this is to stretch out the select when you first go to it. For example, I did this:

<option>greyhound      .

OK, that was a mouthful. If you understand how this example works, you understand a lot of JavaScript, and you'll have no problem doing your homework assignment for this lesson. Once you've done the example and viewed source to see how I did it, go on to this lesson's review.