如何在下拉列表中添加子项

时间:2015-09-24 14:51:41

标签: javascript jquery html5 css3

我使用下拉列表显示菜单。但是有一些菜单有

这样的子菜单
-Movies 
       -In Cinemas now
       -Coming Soon

我成功为简单的菜单编写代码我已经采取了一个下拉列表和 添加了一些项目,如代码所示。一些项目包含子项目现在的问题是如何在下拉列表中添加这些子项目。

     <select id="cd-dropdown" class="cd-select">
                                <option value="1" >Home</option>
                                <option value="2" >Movies</option>
                                <option value="3" >T.V. Shows</option>
                                <option value="4" >Photos</option>
                                <option value="4" >Site Help</option>

                            </select>

但是我无法将子项添加到主要项目中。请给出任何解决方案

2 个答案:

答案 0 :(得分:0)

您可以使用Bootstrap,有关详细信息,请参阅主题下面的文档here 下拉列表中的子菜单

http://getbootstrap.com/2.3.2/components.html

它只是这样做

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

答案 1 :(得分:0)

如果它在表格中你应该使用optgroup。

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 

来自:http://www.w3schools.com/tags/tag_optgroup.asp