分級下拉列表


在制作網頁時,如果信息分類的內容很多,還可以在下拉列表中將其分級顯示,是用戶更加清晰的查看選項。以下實例,可以看到下拉列表中的選項是分級顯示的。程序運行結果如圖所示。

本實例主要是應用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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;圖書分類</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>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM