📄 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\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/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://www.pchome.net/ch/tur/pstext/teacher/javascript/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://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_9.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> 选单<br>
<font color="#FF0000">第十页</font> <a href="day5_10.html" tppabs="http://www.pchome.net/ch/tur/pstext/teacher/javascript/day5_10.html">在选单中应用<font
face="宋体">onchange</font>命令</a></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 + -