Question

当我独立使用多选时，效果很好。

但是当我把它放在bootstrap下拉菜单中时，如我们所知，如果我们点击下拉菜单，它的窗口将会关闭。

所以我使用stopPropagation（）来停止点击事件进入下拉菜单，但是，通过这样做，多选未通过工作，而'test'可以正确调用函数test（）。

我的代码如下：

<ul class='dropdown-menu dropdown-menu-right'>
  <li>
    <div class='container-fluid'>
      <div class='row' id='filter-container'>
        <div class='col-md-12'>
          <h4><a onclick='test();'>test</a></h4>
          <select id='example-getting-started' multiple='multiple'>
            <option value='aaaaaa'>bbbbbb</option>
            <option value='cccccc'>cccccc</option>
            <option value='dddddd'>dddddd</option>
            <option value='eeeeee'>eeeeee</option>
          </select>
        </div>
      </div>
    </div>
  </li>
</ul>




$('#filter-container').click(function(e) {
  e.stopPropagation();
});

Answer 1

我遇到了同样的问题，并找到了this bootstrap插件来处理所有这些问题。它会为多重选择保持下拉列表打开。该片段似乎有问题pr

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.min.css" rel="stylesheet"/>



<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.min.js"></script>

＆＃13;

该片段似乎存在正确呈现mutliselect的问题。

Answer 2

结论：

@see dropdown source link

下拉事件将标记为

div

因此没有方法可以将多选项放入Bootstrap下拉菜单中。

Bootstrap下拉菜单中使用的Bootstrap multiselect

2 个答案: