使用选择按钮和下拉列表

时间:2014-09-17 10:33:16

标签: javascript jquery html twitter-bootstrap

我在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”组件集成时,它不起作用。

1 个答案:

答案 0 :(得分: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/