📄 day5_10.html
字号:
<td colspan="2" height="17"><a href="../../1hdml/index.html">-HDML</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">-ping</font></a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">-模板</a></td>
</tr>
<tr bgcolor="#666699">
<td colspan="2" align="center"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<!-- #EndLibraryItem --> </td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip教程</title>
<strong>第十页：<font size="3">在选单中应用<font face="宋体">onchange</font>命令</font></strong>
<p align="JUSTIFY"><font size="3"></font><font size="4"> </font></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.<br>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_fo<br>rm.the_examples;
var the_array = eval(the_array_name);
setOptionText(window.document.the_form.the_exampl<br>es, the_array);
}
</font></pre>
</blockquote>
</font>
<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="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">第五课课程介绍</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html">介绍反馈表单</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">控制文字域的值</a><br>
<font color="#FF0000">第四页</font> <a href="day5_4.html">文字域事件</a><br>
<font color="#FF0000">第五页</font> <a href="day5_5.html">反馈表单处理器</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">文字域的练习</a><br>
<font color="#FF0000">第七页</font> <a href="day5_7.html">复选框</a><br>
<font color="#FF0000">第八页</font> <a href="day5_8.html">单选框</a><br>
<font color="#FF0000">第九页</font> <a href="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">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][<a href="day4_1.html">第4课</a>][第5课]</font></p>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -