📄 6.5.3.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">select 对象</h2>
<p>1. 属性、方法和事件</p>
<p>
select 对象包含多个属性、方法和事件，如表 6.6 所示。</p>
<p><div align=center> 表 6.6 select 对象的属性、方法和事件</div>
<p><center>
<table BORDER cellspacing=2 cellpadding=9 width=605>
<tr>
<td width="22%" valign="TOP">
<div align="center"><b><font face="宋体,SimSun" lang="ZH-CN" size="1">项目</font></b>
</div>
</td>
<td width="78%" valign="TOP">
<div align="center"><b><font face="宋体,SimSun" lang="ZH-CN" size="1">说明</font></b>
</div>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">blur()</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>将焦点从选项菜单上移走。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">focus()</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>将焦点移动到选项菜单上。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">form</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单所在的表单。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">length</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单中选项的数目。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">name</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单的名称，对应于</font><font size=1>
SELECT </font><font face="宋体,SimSun" lang="ZH-CN" size=1>标记符中的</font><font size=1>
NAME </font><font face="宋体,SimSun" lang="ZH-CN" size=1>属性。</font> </td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">options</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单中各选项的数组，该数组还有</font><font size=1>
length </font><font face="宋体,SimSun" lang="ZH-CN" size=1>和</font><font size=1>
selectedIndex </font><font face="宋体,SimSun" lang="ZH-CN" size=1>子属性，分别表示选项菜单中选项的个数和当前选中选项的索引（如果选中多项，则表示第一个选项的索引）。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">selectedIndex</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单中被选项的索引（如果选中多项，则表示第一个选项的索引），与使用</font><font size=1>
options.selectedIndex </font><font face="宋体,SimSun" lang="ZH-CN" size=1>效果一样。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">onBlur</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>当从选项菜单上移开焦点时触发。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">onChange</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>当从选项菜单上移开焦点并且所选选项发生变化时触发。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">onFocus</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>当选项菜单获得焦点时触发。</font>
</td>
</tr>
<tr>
<td width="22%" valign="TOP">
<div align="center"><font size="1">type</font> </div>
</td>
<td width="78%" valign="TOP"> <font size=1> </font><font face="宋体,SimSun" lang="ZH-CN" size=1>表示选项菜单的类型，如果为</font><font size=1>
SELECT </font><font face="宋体,SimSun" lang="ZH-CN" size=1>标记符设置了</font><font size=1>
MULTIPLE </font><font face="宋体,SimSun" lang="ZH-CN" size=1>属性，则值为</font><font size=1>
select-multiple</font><font face="宋体,SimSun" lang="ZH-CN" size=1>；否则值为</font><font size=1>
select-one</font><font face="宋体,SimSun" lang="ZH-CN" size=1>。</font> </td>
</tr>
</table>
<p></center>
<p>
<p>
2. 导航列表示例
<p> 以下示例实现了一个 Web 页导航列表，在该列表中将主页上重要的超链接组织起来，使浏览者可以在这个列表中寻找自己需要查看的网页，而不用在整个主页上查找超链接的具体位置。
<p><a href="../src/tu6.18.htm" target="_blank">示例</a></p>
<p> 当用户在导航列表中选择了一个选项之后，当前窗口中将显示对应的页面（该网页选自 8848 网站）。
<p>
<p>3. 导航到新窗口
<p>
如果在导航时希望保留原来打开的网页，那么可以将目标网页在一个新窗口中打开。这种选项列表常用于组织"友情链接"、"合作伙伴"等外部网页。<p>
要实现这样的效果，只需将刚才示例中的 jump() 函数更改为如下所示即可，请读者自行尝试：<p>
function jump()<p>
{window.open(document.form1.navbar.options[document.form1.navbar.selectedIndex].value);<p>
}
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -