Try this example and read the comments below:
My favorite animal is ...
Comment a relatively complex JavaScript program. First, let's look at the form itself:
<form name="the_form">
<select name="choose_category" onChange="swapOptions(.the_form.choose_category.options[selectedIndex].text);">
<option selected>Dogs</option>
<option>Fish</option>
<option>Birds</option>
</select>
<select name="the_examples" multiple>
<option>poodle</option>
<option>puli</option>
<option>greyhound</option>
</select>
</form>
This form has two elements: a drop-down menu and a list menu. The processor of the following menu calls the function swapOptions(). The function has been in the header
It is defined with the parameter - the selected animal species.
The first array I defined in the first part:
var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");
Note that the naming of these arrays is consistent with the naming in the drop-down menu. Soon you will understand why. Now let's look at the function called when the drop-down menu is changed:
function swapOptions(the_array_name)
{
var numbers_select = .the_form.the_examples;
var the_array = eval(the_array_name);
setOptionText(.the_form.the_examples, the_array);
}
The definition of this function includes a parameter: the_array_name. If you open the drop-down menu and select "Fish" , the_array_name is equivalent to the string "Fish".
The first line in the function body includes a variable to refer to the second form element: the list menu.
Line 2 introduces a new concept: eval(). eval() is quite unique, so we will stay in future courses to explain. These results of the command line 2 are that the variable the_array will be equivalent to one of the arrays defined earlier. If the_array_name is "Fish", the_array is equivalent to the Fish array. If you want to know how this is done, please learn eval.
Line 3 defines another function setOptionText(). setOptionText() is used to assign the_array to the list menu. The following is the content of the function:
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
This function has two parameters: a reference to the menu element and an array. Line 1 sets up a for loop because of all menu elements of the loop. Note that the option attribute of the menu element is an array of all options in the menu. Because it is an array, you can use the length attribute to discover the number of elements of the array. During the first loop, the loop variable value is 0. The body value of the loop is:
the_select.options[0].text = the_array[0];
If you select "Fish" in the drop-down menu, the_array[0] is "trout", so this line command changes the first option in the list menu to "trout". The next time the loop is equal to 1, and the second option in the list menu is "mackerel".
If you understand this example, you will have a deeper understanding of JavaScript.
The primary tutorial ends here, and an advanced tutorial will be released later. Please stay tuned.