📄 day5_9.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></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></strong> <p ALIGN="JUSTIFY"> </p> <table width="441" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="441"><font SIZE="3">选单是我们所学的表单选项中最奇特的一种。有两种基本的<br> 格式：下列选单和列表选单。以下为例子： <form name="form_1"> <p><b>下列选单<font face="宋体">:</b><br> <select name="pulldown_1" size="1"> <option>probiscus </option> <option>spider </option> <option>lemur </option> <option>chimp </option> <option>gorilla </option> <option>orangutan </option> </select> </font></p> <p><b>列表选单<font face="宋体">:</b><br> <select name="list_1" size="3"> <option>probiscus </option> <option>spider </option> <option>lemur </option> <option>chimp </option> <option>gorilla </option> <option>orangutan </option> </select> </font></p> </form> <p>它的奇特之处在于这个选单有名称，但其中的各个选项没有<br> 名称。例如，在<font face="宋体">HTML</font>中，第<font face="宋体">1</font>个选单如下： </font></td> </tr> </table> <ul> <pre><big><font face="宋体"><select name="pulldown_1" size=1><option>probiscus<option>spider<option>lemur<option>chimp<option>gorilla<option>orangutan</select></font></big></pre> </ul> <table width="437" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="437"><font SIZE="3">注意这个选单的名称是<font face="宋体"><tt>pulldown_1</tt></font>，但各个选项没有名称。<br> 所以要调用其中的各个选项则有点困难。 <p>幸好数组可以帮助我们调用其中的选项。如果你想改变该下<br> 列选单中的第<font face="宋体">2</font>个选项，你可以这样做： </font></td> </tr> </table> <ul> <pre><big><font face="宋体">window.document.form_1.pulldown_1.options[1].text = 'new_text';</font></big></pre> </ul> <table width="427" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="427"><font SIZE="3">这是因为选单的元素有一个选项属性，而该属性是选单所<br> 有选项的集合而成的数组。点击<a href="#" onClick="window.document.form_1.pulldown_1.options[1].text = '*thau*'; return false;"><font face="宋体">change the select</font></a>然后从<br> 下拉选单从下列选单中查看其选项是否已经被改变。现在<br> 第<font face="宋体">2</font>个选项应该是<tt><font face="宋体">*thau*</font>。</tt> <p>除了选项属性，选单还有一项属性叫做<font face="宋体"><tt>selectedIndex</tt></font>。大<br> 笔一个选项被选择后，<font face="宋体"><tt>selectedIndex</tt></font>属性将变成被选项的<br> 数组索引号（序列号）。选择第<font face="宋体">2</font>个列表选单中的一个选项，<br> 然后检查<a href="#" onClick="alert('index is: ' + window.document.form_1.list_1.selectedIndex); return false;">索引号</a>。记住数组中的第<font face="宋体">1</font>个选项的索引号是<font face="宋体">0</font>。 </font></td> </tr> </table> <ul> <pre><big><font face="宋体"><a href="#" onClick="alert('index is: ' + window.document.form_1.list_1.selectedIndex); return false;">check the index.</a></font></big></pre> </ul> <table width="430" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="430"><font face="宋体" size="3">表单的名称是<tt>form_1</tt>，列表选单的名称是<tt>list_1</tt>。<br> <tt>selectedIndex</tt>属性值为<br> <tt>window.document.form_1.list_1.selectedIndex</tt>。你还可<br> 以将<tt>selectedIndex</tt>设置如下：</font></td> </tr> </table> <ul> <pre><big><font face="宋体">window.document.form_1.list_1.selectedIndex = 1;</font></big></pre> </ul> <table width="422" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="422"><font size="3">并高亮度显示第<font face="宋体">2</font>个选项。</font> <p><font size="3">一旦你得到被选项的索引号，你就可以发现其内容： </font></td> </tr> </table> <ul> <pre><font face="宋体"><big>var the_select = </big><big>window.document.form_1.list_1;var the_index = </big><big>the_select.selectedIndex;var the_selected = </big><big>the_select.options[the_index].text;</big></font></pre> </ul> <table width="429" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="429"><font size="3"><font face="宋体"><tt>selectedIndex</tt></font>属性很有用，但如果有多个选项同时被选中，<br> 会如何呢？有关这方面的内容请阅读<a href="javascript:if(confirm('http://www.hotwired.com/webmonkey/98/04/files3a/multiple_select.html \n\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location='http://www.hotwired.com/webmonkey/98/04/files3a/multiple_select.html'" tppabs="http://www.hotwired.com/webmonkey/98/04/files3a/multiple_select.html" target="_blank"><font face="宋体">multiple selects</font></a>。 <p>选单元素的处理器为<font face="宋体"><tt>onChange()</tt></font>。当选单发生变化时，则<br> 该处理器被激活。 </font></td> </tr> </table> <p><a href="day5_10.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_10.html">>></a></p> <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_9.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_9.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> 选单<br> <font color="#FF0000">第十页</font> <a href="day5_10.html" tppabs="http://sun150-2.fimmu.edu.cn/doing/js1/day5_10.html">在选单中应用<font face="宋体">onchange</font>命令</a></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 + -