JSFiddle Link

Question

我正在尝试使用bootstrap按钮组构建一个小搜索框，我希望在其中选择要搜索的字段和值。我尝试使用以下代码，用户界面很好。但是，当我单击下拉列表以选择字段（或任何空白区域）时，表单将被关闭。有没有办法实现这样的事情（没有建立自定义表格等）？

<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以选择字段（或任何空白空间）时，表单将被关闭，因为这是.dropdown-menu引导程序的工作方式，当您单击{{1 bootstrap将类button.dropdown-toggle添加到其父（在这种情况下为open）并且有样式：

.btn-group

然后当您单击页面上的任意位置时，包括菜单本身的引导程序，请删除类.open>.dropdown-menu {/*at this point the menu is showing*/ display: block; }，以便再次隐藏菜单。

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

open

我认为，当您点击$('.dropdown-menu').click(function(e) { e.stopPropagation(); }); Go 时，如果不忘记此部分，您仍然想要隐藏它。

button

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

这是一个有效的JSFiddle 分叉来自你的

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

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

Bootstrap 3：在按钮组中添加选择列表

2 个答案:

JSFiddle Link