Hierarchical drop-down list in html

When making a web page, if there is a lot of information classified, you can also display it hierarchically in the drop-down list , which is a clearer viewing option for users. In the following example, you can see that the options in the drop-down list are displayed hierarchically. The program running results are shown in the figure.

This example mainly applies the optgrounp tag and sets its labelattribute. The optgroup tag is mainly used to logically group the options in the select element. The text specified in the optgroup tag is non-optional. Generally, the options can be distinguished by replacing the text field.

The key code to implement the hierarchical drop-down list is as follows:

<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>

The above is the detailed content of Hierarchical drop-down list in html. For more information, please follow other related articles on the PHP Chinese website!