Heim > Artikel > Web-Frontend > Hierarchische Dropdown-Liste
Wenn beim Erstellen einer Webseite viele Informationen klassifiziert sind, können Sie diese auch hierarchisch in der Dropdown-Liste anzeigen, was eine klarere Anzeigeoption für Benutzer darstellt. Im folgenden Beispiel können Sie sehen, dass die Optionen in der Dropdown-Liste hierarchisch angezeigt werden. Die Ergebnisse der Programmausführung sind in der Abbildung dargestellt.
In diesem Beispiel wird hauptsächlich das optgrounp-Tag angewendet und sein LabelAttribut festgelegt. Das optgroup-Tag wird hauptsächlich zur logischen Gruppierung der Optionen im select-Element verwendet. Der im optgroup-Tag angegebene Text ist im Allgemeinen durch Ersetzen des Textfelds unterscheidbar.
Der Schlüsselcode zum Implementieren einer hierarchischen Dropdown-Liste lautet wie folgt:
<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>
Das obige ist der detaillierte Inhalt vonHierarchische Dropdown-Liste