对带有下拉菜单的按钮使用选择

Question

我在 twitter-bootstrap 中使用带有 input-group 组件下拉菜单的按钮：http://getbootstrap.com/components/#btn-dropdowns

代码：

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

我希望当用户从按钮下拉菜单示例中选择一个选项时：im63.gulfup.com/pETcxK.png 所选选项必须出现而不是：“付款方式”默认标签。

我知道“select”的标记，但是当我尝试将它与“input-group”组件集成时它不起作用。

Answer 1

HTML：

<select class="selectpicker">
    <option>Option one</option>
    <option>THE HAMBURGER!</option>
    <option>Option two or three, depents on how you see it</option>
</select>

JS：

$(".selectpicker").selectpicker();

JsFiddle：http://jsfiddle.net/a8cdntuf/6/
插件：http://silviomoreto.github.io/bootstrap-select/