第十页：在选单中应用onchange命令

点击数:

尝试这个例子并阅读下面的注释：
My favorite animal is ...

注释一个比较复杂的JavaScript程序。首先，我们看看表单
本身：

<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>

该表单有两个元素：一个下拉选单和一个列表选单。下列选单的处理器调用函数swapOptions()。该函数在首部已经作了定义，其参数为- 被选的动物种类。

首部中我首先定义的几个数组：

var dogs = new Array("poodle",
"puli","greyhound");

var fish = new Array("trout",
"mackerel", "bass");

var birds = new Array("robin",
"hummingbird", "crow");

注意这些数组的命名和下拉选单中的命名一致。很快你就会明白为什么。现在我们看看当下拉选单被改变时被调用的函数：

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_array_name。如果打开下 拉选单并选择"Fish"，则the_array_name就等同于字符串 "Fish"。

函数主体中第1行包括一个变量用于引用第2个表单元素：列 表选单。

第2行引入一个新概念：eval()。eval()比较奇特，我们留在以后的课程中讲解。 第2行命令的这些结果是变量the_array 将等同于前面所定义的数组之一。如果the_array_name是 "Fish"，the_array则等同于Fish数组。如果你想了解这是 怎么作的，请学习eval。

第3行定义另一个函数setOptionText()。setOptionText()
用于将the_array赋值给列表选单。以下为该函数内容：

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

该函数有两个参数：对选单元素的引用和一个数组。第1行设立一个for循环，由于循环所有的选单元素。注意选单元素的选项属性是该选单所有选项组成的数组。因为它是一个数组，你可以用长度（length）属性发现数组的元素数目。

第1次循环时，循环变量值是0。循环的主体值为：

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

如果你在下拉选单中选择了"Fish"，则the_array[0]就是 "trout"，所以该行命令将列表选单中的第1个选项改成 "trout" 。下一次循环时，循环等于1，并且列表选单中第2 个选项则是"mackerel" 。

注意，当你改变一个选项的文字时，并不能改变选单的尺寸， 所以如果你所改变后的文字很长的话，其后面的部分可能会 被切去。

变通方法是扩展选单的长度：

<option>greyhound  。

注意：我用了一个句号来扩展选单框的长度。这个办法很管用。

如果你理解了该例子，你对JavaScript的了解就比较深了。

JavaScript教程
第一页 第五课课程介绍
第二页 介绍反馈表单
第三页 控制文字域的值
第四页 文字域事件
第五页 反馈表单处理器
第六页 文字域的练习
第七页 复选框
第八页 单选框
第九页 选单
第十页 在选单中应用onchange命令

[第1课][第2课][第3课][第4课][第5课]