twitter-bootstrap - 按钮下拉菜单代替选择

Question

我想知道是否有任何方法可以使用 Twitter Bootstrap 的按钮下拉菜单来替换表单中的选择框。对于移动设备上的用户来说，按钮下拉菜单比标准选择框更优雅、更容易，我希望能够在表单中利用它，以便在表单提交时传递按钮下拉输入。

Answer 1

为此目的有2个不错的插件..

一个是 Bootstrap Select2 ( http://ivaynberg.github.io/select2/ )

演示：http ://bootply.com/63744

另一种是引导选择（https://github.com/silviomoreto/bootstrap-select）：

演示：http ://bootply.com/88082

Answer 2

我最近在一个使用 angular 的项目中按照这些思路做了一些事情。结果实际上非常好，因为预期的设备是 iphone，而新的 ios7 select 并不受欢迎。此代码段中涉及一些自定义样式，但您可以理解。

<div class="dropdown type">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="typeSelectionBox">{{report.type}}</span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a ng-click="setType('Finance')">Finance</a></li>
    <li><a ng-click="setType('Accounting')">Accounting</a></li>
    <li><a ng-click="setType('Marketing')">Marketing</a></li>
  </ul>
</div>

然后在控制器上，我只有一个方法可以在单击项目时设置类型。这避免了使用选择框组件