Bootstrap为DropDown菜单选择了项目值

时间:2015-11-16 14:40:25

标签: javascript jquery html css twitter-bootstrap

我试图让我的两个引导下拉菜单的值可选。可以查看该网站here

正如您所看到的,我已经在CSS中稍微自定义了下拉菜单。

HTML:

        <!-- City Dropdown -->
        <div class="btn-group">                       
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Select City <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
          <li><a href="#">All</a></li>
          <li class="dropdown-header">City</li>
          <li><a href="#">Manchester</a></li>
          <li><a href="#">Liverpool</a></li>
          <li><a href="#">London</a></li>
          <li><a href="#">Newcastle</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Town</li>
          <li><a href="#">Wigan</a></li>
          <li><a href="#">St Helens</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Other</li>
          <li><a href="#">Warwick</a></li>
          <li><a href="#">Oxford</a></li>
          <li><a href="#">Cambridge</a></li>
        </ul>
      </div>

      <!-- Version Dropdown -->
      <div class="btn-group">             
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Version <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
          <li><a href="#">All</a></li>
          <li><a href="#">V1</a></li>
          <li><a href="#">V2</a></li>
          <li><a href="#">V3</a></li>
          <li><a href="#">V4</a></li>
          <li><a href="#">V5</a></li>
          <li><a href="#">V6</a></li>
          <li><a href="#">V7</a></li>
          <li><a href="#">V8</a></li>
        </ul>
      </div>           
    </div>
  </div>
</div>

  

谢谢!

1 个答案:

答案 0 :(得分:0)

我使用了&#34; GL.awog&#34; - 考虑silviomoreto.github.io/bootstrap-select,标准bs下拉菜单仅用于导航,而不是作为选择。

该网站很容易理解,我在几分钟内完成了这项工作:)