Bootstrap 3：在按钮组中添加一个select列表

Question

我正在尝试使用 bootstrap 按钮组构建一个小型搜索框，我想在其中提供 select 要搜索的字段和值。我尝试使用以下代码并且 UI 没问题。但是，当我单击 select 字段（或任何空的 space）的下拉菜单时，表单将关闭。有没有办法实现这样的目标（无需构建自定义表单等）？

<div class="btn-group">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown">
        Search <span class="caret"></span>
    </button>
    <div class="col-sm-12 dropdown-menu">
        <select class="form-control" >
            <option value="id">ID</option>
            <option value="Name">Name</option>
        </select>
        <input type="text" class="form-control" />
        <button>Reset</button>
        <button class="pull-right">Go</button>
    </div>
</div>

jsfiddle: http://jsfiddle.net/krishnasarma/u891Lcrd/

Answer 1

您只需在脚本部分添加以下脚本即可。它会避免你的问题。

$('.dropdown-menu').find('select').click(function(e) {
   e.stopPropagation();
 });

JSFiddle Link

http://jsfiddle.net/vinodudhaya/u891Lcrd/2/.

Answer 2

当您单击 dropdown 到 select 字段（或任何空的 space）时，表单将关闭，因为这是 .dropdown-menu bootstrap 有效，当您单击 button.dropdown-toggle bootstrap 时，将 class open 添加到其父项（在本例中为 .btn-group），并且有风格：

.open>.dropdown-menu {/*at this point the menu is showing*/
    display: block;
}

然后当您单击页面上的任意位置时，包括菜单本身 bootstrap 删除 class open 以便再次隐藏菜单。

现在知道它是如何工作的让我们修复它来实现你想要的，首先我们必须避免当你点击它的任何地方时菜单被隐藏：

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

我想你还是想在点击button Go时隐藏它，如果没有忘记这部分。

$('#search-btn').click(function(e) {
    $('.open').removeClass('open');
});

现在让我们把它们放在一起：

这里是你的 JSFiddle fork

$('.dropdown-menu').click(function(e) {
   e.stopPropagation();
});
$('#search-btn').click(function(e) {
   $('.open').removeClass('open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
  <button type="button" class="dropdown-toggle" data-toggle="dropdown">
    Search <span class="caret"></span>
  </button>
  <div class="col-sm-12 dropdown-menu">
    <select class="form-control" >
      <option value="id">ID</option>
      <option value="Name">Name</option>
    </select>
    <input type="text" class="form-control" />
    <button>Reset</button>
    <button id="search-btn" class="pull-right">Go</button>
  </div>
</div>

Bootstrap 3：在按钮组中添加一个select列表

Bootstrap 3: Add a select list in button group

javascript

jquery

css

twitter-bootstrap

buttongroup

JSFiddle Link