📄 day5_9.html

📁 不错的javascript学习资料适合于刚刚学习javascirpt的出学者
💻 HTML
📖 第 1 页 / 共 2 页
字号:
上一页 12
  </tr>
  <tr bgcolor="#FFFFFF"> 
    <td colspan="2">-<a href="../../1-backend/database/php_mysql/index.html">PHP/MySQL</a></td>
  </tr>
  <tr bgcolor="#FFFFFF"> 
    <td colspan="2"><a href="../../1-backend/cgi_perl/perl_beginner/index.html">-Perl</a> 
    </td>
  </tr>
  <tr bgcolor="#FFFFFF"> 
    <td colspan="2">-<a href="../../1-teach/other/index.htm">其它</a> </td>
  </tr>
  <tr> 
    <td colspan="2" bgcolor="#666699"> 
      <div align="center"><font color="#FFFFFF">更多教程</font></div>
    </td>
  </tr>
  <tr bgcolor="#FFFFFF"> 
    <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>
 <small><small><br>
      </small></small><strong>第九页：<font size="3">选单</font></strong> 
      <p align="JUSTIFY"><font size="3"></font><font size="4">　</font></p>
      <table width="441" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="441"> <font size="2"></font><font size="3">选单是我们所学的表单选项中最奇特的一种。有两种基本的<br>
            格式：下列选单和列表选单。以下为例子： 
            <form name="form_1">
              <p><b>下列选单<font face="宋体">:</font></b><font face="宋体"><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="宋体">:</font></b><font face="宋体"><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="宋体">

&lt;select name=&quot;pulldown_1&quot; size=1&gt;

&lt;option&gt;probiscus

&lt;option&gt;spider

&lt;option&gt;lemur

&lt;option&gt;chimp

&lt;option&gt;gorilla

&lt;option&gt;orangutan

&lt;/select&gt;

</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="宋体">&lt;a href=&quot;#&quot; onClick=&quot;alert('index is: ' + 
window.document.form_1.list_1.selectedIndex); 
return false;&quot;&gt;check the index.&lt;/a&gt;
</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="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">&gt;&gt;</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">第五课课程介绍</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> 选单<br>
        <font color="#FF0000">第十页</font> <a href="day5_10.html">在选单中应用<font face="宋体">onchange</font>命令</a></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.&nbsp; All rights reserved. 
 </span> 
</center>
</body>
<!-- #EndTemplate --></html>
上一页 12
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -