在引导程序按钮下拉菜单中显示引导程序选择 [英] Show bootstrap-select inside bootstrap button dropdown

问题描述

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

 
<button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">取 <span class="caret"></span><ul class="dropdown-menu" role="menu"><li><表格><select id="mySelect" class="selectPicker"><option>1</option></选择></表单>
<script type="text/javascript">$('.dropdown-menu').click(function(e) {e.stopPropagation();//这将防止事件冒泡并在您键入/单击文本框时关闭下拉列表.});$('.selectpicker').selectpicker({container: 'body'});

解决方案

按钮菜单下拉菜单在选择任何选项时关闭，因为本质上，它会跳过您的 stopPropagation，因为选择容器设置为主体.您需要添加一些 javascript 来检查 event.target(首先调度事件的元素)是否是 bootstrap-select 元素之一.如果 event.target 是 bootstrap-select option"之一元素，那么你会想要stopPropagation.您会注意到，这也将阻止 bootstrap-select 关闭，因此您可以通过从带有 bootstrap-select 类的元素中删除打开的类来手动执行此操作.

演示

JQUERY:

$('.dropdown-menu').on('click', function(event) {event.stopPropagation();});$('.selectpicker').selectpicker({容器:'身体'});$('body').on('click', function(event) {var target = $(event.target);if (target.parents('.bootstrap-select').length) {event.stopPropagation();$('.bootstrap-select.open').removeClass('open');}});

HTML:

<按钮类型=按钮"class="btn btn-primary btn-lg dropdown-toggle";数据切换=下拉">取 <span class="caret"></span><ul class="下拉菜单";角色=菜单"><li><表格><select class="selectpicker"><option>芥末</option><option>番茄酱</option><option>Relish</option></选择></表单>

I use Bootstrap button dropdown to show a form. I have disabled dropdown disappearing onclick (while user manipulates the form) by calling stopPropagation. One of the elements of the form is a dropdownlist. If I use a native html select element everything is okay (except is looks ugly). If I replace it with bootstrap-select (which imitates select by divs), I can not select a value (as there is not enough place in the button dropdown). I tried to apply a workaround to specify container: 'body' for bootstrap-select. It helps to see dropdownlist values but button dropdown is closed when I select the element (I guess it happens as boostrap-select belongs to body which is higher then button dropdown to which click-propagation is applied).

            <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>

解决方案

The button menu dropdown closes upon selecting any of the options because essentially, it jumps over your stopPropagation since the select container is set to the body. You'll need to add a bit of javascript to check if the event.target (the element that dispatched the event in the first place) was one of the bootstrap-select elements. If the event.target is one of the bootstrap-select "option" elements, then you'll want to stopPropagation. You'll notice though that this will also prevent the bootstrap-select from closing, so you can just do that manually by removing the open class from the element with the bootstrap-select class.

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>

这篇关于在引导程序按钮下拉菜单中显示引导程序选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！