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

Question

我使用Bootstrap按钮下拉列表来显示表单.我通过调用禁用了下拉消息(当用户操作表单时)stopPropagation.表单的一个元素是下拉列表.如果我使用本机html选择元素一切都很好(除了看起来很难看).如果我用bootstrap-select(它模仿由div选择)替换它,我就无法选择一个值(因为按钮下拉列表中没有足够的位置).我尝试应用一种解决方法来指定container: 'body'bootstrap-select.它有助于查看下拉列表值,但是当我选择元素时按钮下拉列表关闭(我猜它会发生,因为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关闭,因此您可以通过从类中删除open类来手动执行此操作bootstrap-select.

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>