📄 tutorial5_page9.htm
字号:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
<title>Webmonkey: javascript: Thau's JavaScript Tutorial: Day 1</title>
<meta NAME="keywords"
CONTENT="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder, pag">
<meta NAME="description"
CONTENT="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta NAME="Template" CONTENT="E:\LIZEJUN\OFFICE\html.dot">
</head>
<body TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff">
<table CELLSPACING="0" BORDER="0" CELLPADDING="3" WIDTH="702">
<tr>
<td WIDTH="77%" VALIGN="MIDDLE"><font FACE="宋体" LANG="ZH-CN" SIZE="4" COLOR="#ff0000"></font><b><font
FACE="System,黑体" LANG="ZH-CN" SIZE="5" COLOR="#ff0000">第</font><font FACE="宋体"
LANG="ZH-CN" SIZE="5" COLOR="#ff0000">9</font><font FACE="System,黑体" LANG="ZH-CN"
SIZE="5" COLOR="#ff0000">页：选单</font></b><font FACE="System,黑体" LANG="ZH-CN"><br>
<!-- BYLINE --> </font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2">作者：</font><a
HREF="mailto:thau@wired.com"><font FACE="宋体" LANG="ZH-CN" SIZE="2">Thau!</font></a><font
FACE="宋体" LANG="ZH-CN"> <!-- SEE ALSO LINKS --></font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">选单是我们所学的表单选项中最奇特的一种。有两<br>
种基本的格式：下列选单和列表选单。以下为例<br>
子：<form>
<b><p>下列选单</font><font FACE="宋体" LANG="ZH-CN">:</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> </p>
</font><b><font FACE="System,黑体" LANG="ZH-CN"><p>列表选单</font><font
FACE="宋体" LANG="ZH-CN">:</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>
<font FACE="System,黑体" LANG="ZH-CN"><p>它的奇特之处在于这个选单有名称，但其中的各个<br>
选项没有名称。例如，在</font><font FACE="宋体" LANG="ZH-CN">HTML</font><font
FACE="System,黑体" LANG="ZH-CN">中，第</font><font FACE="宋体" LANG="ZH-CN">1</font><font
FACE="System,黑体" LANG="ZH-CN">个选单如<br>
下：</font> </td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>
<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
<option>gorilla
<option>orangutan
</select>
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">注意这个选单的名称是</font><tt>pulldown_1</tt><font
FACE="System,黑体" LANG="ZH-CN">，但各个选项没<br>
有名称。所以要调用其中的各个选项则有点困难。<p>幸好数组可以帮助我们调用其中的选项。如果你想<br>
改变该下列选单中的第</font><font FACE="宋体" LANG="ZH-CN">2</font><font
FACE="System,黑体" LANG="ZH-CN">个选项，你可以这样做：</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>
window.document.form_1.pulldown_1.options[1].text = 'new_text';
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">这是因为选单的元素有一个选项属性，而该属性是<br>
选单所有选项的集合而成的数组。点击</font><a HREF="#"><font FACE="宋体"
LANG="ZH-CN"><b>错误！超级链接引用无效。</b></font></a><font
FACE="System,黑体" LANG="ZH-CN">然后从下拉选单从下列选单中查看其选项是<br>
否已经被改变。现在第</font><font FACE="宋体" LANG="ZH-CN">2</font><font
FACE="System,黑体" LANG="ZH-CN">个选项应该是</font><tt><font FACE="宋体"
LANG="ZH-CN">*thau*</font><font FACE="System,黑体" LANG="ZH-CN">。</tt><p>除了选项属性，选单还有一项属性叫做<br>
</font><tt>selectedIndex</tt><font FACE="System,黑体" LANG="ZH-CN">。大笔一个选项被选择后，<br>
</font><tt>selectedIndex</tt><font FACE="System,黑体" LANG="ZH-CN">属性将变成被选项的数组索引号<br>
（序列号）。选择第</font><font FACE="宋体" LANG="ZH-CN">2</font><font
FACE="System,黑体" LANG="ZH-CN">个列表选单中的一个选项，<br>
然后检查<a HREF="#"><b>错误！超级链接引用无效。</b></a>。记住数组中的第</font><font
FACE="宋体" LANG="ZH-CN">1</font><font FACE="System,黑体" LANG="ZH-CN">个选项的索引<br>
号是</font><font FACE="宋体" LANG="ZH-CN">0</font><font FACE="System,黑体"
LANG="ZH-CN">。</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big><a href="#" onClick="alert('index is: ' +
window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">表单的名称是</font><tt>form_1</tt><font
FACE="System,黑体" LANG="ZH-CN">，列表选单的名称是</font><tt>list_1</tt><font
FACE="System,黑体" LANG="ZH-CN">。</font><font FACE="宋体" LANG="ZH-CN"> </font><font
FACE="System,黑体" LANG="ZH-CN"><br>
</font><tt>selectedIndex</tt><font FACE="System,黑体" LANG="ZH-CN">属性值为<br>
</font><tt>window.document.form_1.list_1.selectedIndex</tt><font FACE="System,黑体"
LANG="ZH-CN">。<br>
你还可以将</font><tt>selectedIndex</tt><font FACE="System,黑体" LANG="ZH-CN">设置如下：</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><big>window.document.form_1.list_1.selectedIndex = 1;
</big></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN">并高亮度显示第</font><font
FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">个选项。<br>
<br>
一旦你得到被选项的索引号，你就可以发现其内<br>
容：</font> </td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><dir>
<pre><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></pre>
</dir>
</td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><font FACE="System,黑体" LANG="ZH-CN"></font><tt>selectedIndex</tt><font
FACE="System,黑体" LANG="ZH-CN">属性很有用，但如果有多个选项同时<br>
被选中，会如何呢？有关这方面的内容请阅读<br>
</font><a HREF="tppmsgs/msgs1.htm#100"><font FACE="宋体" LANG="ZH-CN">multiple selects</font></a><font
FACE="System,黑体" LANG="ZH-CN">。<p>选单元素的处理器为</font><tt>onChange()</tt><font
FACE="System,黑体" LANG="ZH-CN">。当选单发生变化<br>
时，则该处理器被激活。</font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="TOP" BGCOLOR="#ffffff"><big><!-- PAGE X LINKS --></big><!-- this stuff checks if there are more pages in this story. if so, we'll
suck out the titles of those pages and build links. Right now, the maximum is
15 pages. --><!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> <font FACE="System,黑体"
LANG="ZH-CN"><p>第</font><font FACE="宋体" LANG="ZH-CN">1</font><font
FACE="System,黑体" LANG="ZH-CN">页：<a HREF="tutorial5_page1.htm">第</font><font
FACE="宋体" LANG="ZH-CN">5</font><font FACE="System,黑体" LANG="ZH-CN">日课程介绍</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">2</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page2.htm">介绍反馈表单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">3</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page3.htm">控制文字域的值</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">4</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page4.htm">文字域事件</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">5</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page5.htm">反馈表单处理器</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">6</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page6.htm">文字域的练习</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">7</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page7.htm">复选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">8</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page8.htm">单选框</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">9</font><font FACE="System,黑体" LANG="ZH-CN">页：<a
HREF="tutorial5_page9.htm">选单</a><br>
第</font><font FACE="宋体" LANG="ZH-CN">10</font><font FACE="System,黑体"
LANG="ZH-CN">页：<a HREF="tutorial5_page10.htm">在选单中应用</font><font
FACE="宋体" LANG="ZH-CN">onchange</font><font FACE="System,黑体" LANG="ZH-CN">命令</a><br>
</p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2"><p> </p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="4"><p><br>
</p>
</font><font FACE="System,黑体" LANG="ZH-CN" SIZE="2"><p><br>
<!-- AUTHOR TAGLINE --> </font></td>
</tr>
<tr>
<td WIDTH="77%" VALIGN="MIDDLE"></td>
</tr>
</table>
<font FACE="System,黑体" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -