twitter-bootstrap - 在 Bootstrap 按钮下拉列表中显示 Bootstrap 选择

Question

我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native html 选择元素，一切都很好(除了看起来很丑)。如果我用 bootstrap-select 替换它(它模仿 div 的选择)，我无法选择一个值(因为按钮下拉列表中没有足够的位置)。我尝试应用变通方法来指定 container: 'body'用于 Bootstrap 选择。它有助于查看下拉列表值，但是当我选择元素时按钮下拉列表关闭(我猜它发生在 boostrap-select 属于主体，它高于应用点击传播的按钮下拉列表)。

            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select id="mySelect" class="selectPicker">
                              <option>1</option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
  $('.dropdown-menu').click(function(e) {
                e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
            });

  $('.selectpicker').selectpicker({container: 'body'});
</script>

Answer 1

选择任何选项后，按钮菜单下拉菜单都会关闭，因为本质上，它会跳过您的 stopPropagation，因为选择容器设置为主体。您需要添加一些 javascript 来检查 event.target (首先调度事件的元素)是 Bootstrap 选择元素之一。如果 event.target 是 Bootstrap 选择“选项”元素之一，那么您需要 stopPropagation .您会注意到这也会阻止 Bootstrap 选择关闭，因此您可以通过使用 bootstrap-select 从元素中删除开放类来手动执行此操作。类(class)。
DEMO
查询:

$('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('.selectpicker').selectpicker({
    container: 'body'
});

$('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
        event.stopPropagation();
        $('.bootstrap-select.open').removeClass('open');
    }
}); 

HTML:

<div class="btn-group">
    <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
        Take <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <form>    
                <select class="selectpicker">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                    </select>
            </form>
        </li>
    </ul>
</div>