📄 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 mevar 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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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://sun150-2.fimmu.edu.cn/doing/js1/day5_10.html">第五课课程介绍</a><br> <font color="#FF0000">第二页</font> <a href="day5_2.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_2.html">介绍反馈表单</a><br> <font color="#FF0000">第三页</font> <a href="day5_3.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_3.html">控制文字域的值</a><br> <font color="#FF0000">第四页</font> <a href="day5_4.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_4.html">文字域事件</a><br> <font color="#FF0000">第五页</font> <a href="day5_5.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_5.html">反馈表单处理器</a><br> <font color="#FF0000">第六页</font> <a href="day5_6.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_6.html">文字域的练习</a><br> <font color="#FF0000">第七页</font> <a href="day5_7.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_7.html">复选框</a><br> <font color="#FF0000">第八页</font> <a href="day5_8.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_8.html">单选框</a><br> <font color="#FF0000">第九页</font> <a href="day5_9.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/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://sun150-2.fimmu.edu.cn/doing/js1/index.html">第1课</a>][<a href="day2_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day2_1.html">第2课</a>][<a href="day3_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day3_1.html">第3课</a>][<a href="day4_1.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))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 + -