HTML の階層ドロップダウン リスト

Web ページを作成するときに、分類された情報が多い場合は、ドロップダウン リストで階層的に表示することもでき、ユーザーにとってより明確な表示オプションになります。次の例では、ドロップダウン リストのオプションが階層的に表示されていることがわかります。プログラムの実行結果を図に示します。

この例では主に optgroupp タグを適用し、その labelattribute を設定します。 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 の階層ドロップダウン リスト の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。