首页  >  文章  >  web前端  >  html中分级下拉列表<optgroup>

html中分级下拉列表<optgroup>

黄舟
黄舟原创
2017-07-03 09:55:054489浏览

在制作网页时,如果信息分类的内容很多,还可以在下拉列表中将其分级显示,是用户更加清晰的查看选项。以下实例,可以看到下拉列表中的选项是分级显示的。程序运行结果如图所示。

本实例主要是应用optgrounp标记,并设置其label属性。optgroup标记主要用于对select元素中的选项进行逻辑分组,在optgroup标记中指定的文本是非可选项,一般通过替换文本域可以选项区分开来。

实现分级下拉列表的关键代码如下:

<form id="form1" name="form1" method="post" action="">
  <table width="206" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="25" background="images/mid_01.jpg">     图书分类</td>
    </tr>
    <tr>
      <td height="28" align="center"><select name="book_class" id="book_class">
          <optgroup label="Web设计">
          <option>网站建设</option>
          <option>网页设计</option>    
          <option>JavaScript程序设计</option>
          </optgroup>    
          <optgroup label="软件世界">
          <option>软件工程</option>
          <option>软件应用</option>
          </optgroup>
        </select></td>
    </tr>
  </table></form>

 

 

 

以上是html中分级下拉列表<optgroup>的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn