HTML의 계층적 드롭다운 목록

웹페이지를 만들 때 분류된 정보가 많으면 드롭다운 목록에 계층적으로 표시할 수도 있는데, 이는 사용자에게 더 명확한 보기 옵션입니다. 다음 예에서는 드롭다운 목록의 옵션이 계층적으로 표시되는 것을 볼 수 있습니다. 프로그램 실행 결과가 그림에 나와 있습니다.

이 예는 주로 optgroupp 태그를 적용하고 해당 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의 계층적 드롭다운 목록 의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!