Question

我使用Bootstrap按钮下拉列表来显示表单。我通过调用stopPropagation禁用了下拉消息（当用户操作表单时）。表单的一个元素是下拉列表。如果我使用原生html选择元素一切都很好（除了看起来很难看）。如果我用bootstrap-select（它模仿由div选择）替换它，我就无法选择一个值（因为按钮下拉列表中没有足够的位置）。我尝试应用一种解决方法来为bootstrap-select指定container: 'body'。当我选择元素时，有助于查看下拉列表值，但按钮下拉列表已关闭（我猜它会发生，因为boostrap-select属于body，它高于按钮下拉列表，应用了点击传播）。

            <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，因为select容器设置为正文。你需要添加一些javascript来检查event.target（首先调度事件的元素）是否是bootstrap-select元素之一。如果event.target是bootstrap-select“option”元素之一，那么您将需要stopPropagation。您会注意到，这也会阻止bootstrap-select关闭，因此您可以通过从bootstrap-select类的元素中删除open类来手动执行此操作。

DEMO

<强> JQUERY：

$('.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>

Answer 2

我改变了你的功能并在Chrome和FF中进行了测试。

$("ul.dropdown-menu").on("click", "form", function(e) {
    e.stopPropagation(); });

Working Example

在bootstrap按钮下拉列表中显示bootstrap-select

2 个答案:

DEMO