📄 day5_10.html
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript教程</title>
<script language="JavaScript">
<!-- hide me
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);
}
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript教程 - 第五课</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left"><small><small><br>
</small></small><strong>第十页：<font SIZE="3">在选单中应用<font face="宋体">onchange</font>命令</font></strong>
<p ALIGN="JUSTIFY"> </p>
<font SIZE="3"><table width="442" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="442">尝试这个例子并阅读下面的注释： <h2><font face="宋体">My
favorite animal is ...</font></h2>
<form name="the_form">
<p><font face="宋体"><select name="choose_category"
onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"
size="1">
<option selected>dogs </option>
<option>fish </option>
<option>birds </option>
</select> <select name="the_examples" multiple size="1">
<option>poodle </option>
<option>puli </option>
<option>greyhound . </option>
</select> </font></p>
</form>
<p>注释一个比较复杂的<font face="宋体">JavaScript</font>程序。首先，我们看看表单<br>
本身： </td>
</tr>
</table>
<blockquote>
<pre>
<font face="宋体"><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>
</font></pre>
</blockquote>
<table width="431" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="431">该表单有两个元素：一个下拉选单和一个列表选单。下列<br>
选单的处理器调用函数<font face="宋体"><tt>swapOptions()</tt></font>。该函数在首部已经<br>
作了定义，其参数为<font face="宋体">- </font>被选的动物种类。 <p>首部中我首先定义的几个数组：
</td>
</tr>
</table>
<blockquote>
<pre>
<font face="宋体">var dogs = new Array("poodle","puli","greyhound");
var fish = new Array("trout", "mackerel", "bass");
var birds = new Array("robin", "hummingbird", "crow");
</font></pre>
</blockquote>
<table width="439" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="439">注意这些数组的命名和下拉选单中的命名一致。很快你就会<br>
明白为什么。现在我们看看当下拉选单被改变时被调用的<br>
函数： </td>
</tr>
</table>
<blockquote>
<pre>
<font face="宋体">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);
}
</font></font></pre>
</blockquote>
<table width="438" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="438"><font SIZE="3">该函数的定义包括一个参数：<font face="宋体"><tt>the_array_name</tt></font>。如果打开下<br>
拉选单并选择<font face="宋体">"Fish" </font><tt>，则<font
face="宋体">the_array_name</font></tt>就等同于字符串<br>
<font face="宋体">"Fish"</font>。 <p>函数主体中第<font face="宋体">1</font>行包括一个变量用于引用第<font
face="宋体">2</font>个表单元素：列<br>
表选单。</p>
<p>第<font face="宋体">2</font>行引入一个新概念：<font face="宋体"><tt>eval()</tt></font>。<font
face="宋体"><tt>eval()</tt></font>比较奇特，我们留<br>
在以后的课程中讲解。第<font face="宋体">2</font>行命令的这些结果是变量<font
face="宋体"><tt>the_array</tt></font><br>
将等同于前面所定义的数组之一。如果<font face="宋体"><tt>the_array_name</tt></font>是<br>
<font face="宋体">"Fish"</font><tt>，<font face="宋体">the_array</font></tt>则等同于<font
face="宋体">Fish</font>数组。如果你想了解这是<br>
怎么作的，请学习<a
href="javascript:if(confirm('http://www.hotwired.com/webmonkey/98/04/files3a/eval.html \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.hotwired.com/webmonkey/98/04/files3a/eval.html'" tppabs="http://www.hotwired.com/webmonkey/98/04/files3a/eval.html" target="_blank"><font
face="宋体">eval</font></a>。 </p>
</font><p><font SIZE="3">第<font face="宋体">3</font>行定义另一个函数<font
face="宋体"><tt>setOptionText()</tt></font>。<tt><font face="宋体">setOptionText()</font></tt><br>
用于将</font><font size="3" face="宋体"><tt>the_array</tt></font><font SIZE="3">赋值给列表选单。以下为该函数内容：</font>
</td>
</tr>
</table>
<blockquote>
<pre><font face="宋体">
function setOptionText(the_select, the_array)
{
for (loop=0; loop < the_select.options.length; loop++)
{
the_select.options[loop].text = the_array[loop];
}
}
</font></pre>
</blockquote>
<table width="435" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="435">该函数有两个参数：对选单元素的引用和一个数组。第<font
face="宋体">1</font>行<br>
设立一个<font face="宋体">for</font>循环，由于循环所有的选单元素。注意选单元<br>
素的选项属性是该选单所有选项组成的数组。因为它是一个<br>
数组，你可以用长度（<font face="宋体">length</font>）属性发现数组的元素数目。<font
face="宋体"> </font><p>第<font face="宋体">1</font>次循环时，循环变量值是<font
face="宋体">0</font>。循环的主体值为：</p>
<p><font face="宋体">the_select.options[0].text = the_array[0];</font></p>
<p>如果你在下拉选单中选择了<font face="宋体">"Fish"</font>，则<font
face="宋体"><tt>the_array[0]</tt></font>就是<br>
<font face="宋体">"trout"</font>，所以该行命令将列表选单中的第<font
face="宋体">1</font>个选项改成<br>
<font face="宋体">"trout" </font>。下一次循环时，循环等于<font
face="宋体">1</font>，并且列表选单中第<font face="宋体">2</font><br>
个选项则是<font face="宋体"> "mackerel" </font>。</p>
<p>注意，当你改变一个选项的文字时，并不能改变选单的尺寸，<br>
所以如果你所改变后的文字很长的话，其后面的部分可能会<br>
被切去。<font face="宋体"> </font></p>
<p>变通方法是扩展选单的长度：</p>
<p><font face="宋体"><option>greyhound </font>。<font
face="宋体"><br>
</font></p>
<p>注意：我用了一个句号来扩展选单框的长度。这个办法很<br>
管用。</p>
<p>如果你理解了该例子，你对<font face="宋体">JavaScript</font>的了解就比较深了。
</td>
</tr>
</table>
<p align="left"><font face="宋体" size="3" color="#000000"><strong>JavaScript教程</strong></font><font
color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF0000">第一页</font> <a href="day5_10.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_10.html">第五课课程介绍</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_2.html">介绍反馈表单</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_3.html">控制文字域的值</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_4.html">文字域事件</a><br>
<font color="#FF0000">第五页</font> <a href="day5_5.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_5.html">反馈表单处理器</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_6.html">文字域的练习</a><br>
<font color="#FF0000">第七页</font> <a href="day5_7.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_7.html">复选框</a><br>
<font color="#FF0000">第八页</font> <a href="day5_8.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_8.html">单选框</a><br>
<font color="#FF0000">第九页</font> <a href="day5_9.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_9.html">选单</a><br>
<font color="#FF0000">第十页</font> 在选单中应用<font face="宋体">onchange</font>命令</font></p>
<p align="left"><font face="宋体" size="3">[<a href="index.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/index.html">第1课</a>][<a
href="day2_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day2_1.html">第2课</a>][<a href="day3_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day3_1.html">第3课</a>][<a href="day4_1.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day4_1.html">第4课</a>][第5课]</font></p>
<hr align="left">
<p><font size="2">本文由<a href="javascript:if(confirm('http://chd.126.com/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://chd.126.com/'" tppabs="http://chd.126.com/" target="_blank">《</font><font
face="verdana, arial, geneva, sans-serif" size="2">CHD</font><font size="2">的网络教室》</a>根据<a
href="javascript:if(confirm('http://www.webmonkey.com.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.webmonkey.com.cn/'" tppabs="http://www.webmonkey.com.cn/" target="_blank">《网猴》</a>相关文章改编，版权归<a
href="javascript:if(confirm('http://www.webmonkey.com.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.webmonkey.com.cn/'" tppabs="http://www.webmonkey.com.cn/" target="_blank">《网猴》</a>所有</font></td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -