Bootstrap多選在引導下拉菜單中使用

但是當我把它放在引導下拉菜單中，正如我們所知，如果我們點擊下拉菜單，它的窗口將被關閉。

所以我使用stopPropagation（）來停止單擊事件進入下拉菜單，但是，通過這樣做，多選無法正常工作，而「測試」可以正確調用函數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(); 
});

來源

2016-06-29 YinweiLi

你的test（）函數是什麼？ – Ctc

@Ctc test（）是一個簡單的警報。函數測試（）{alert（'1'）;} – YinweiLi

我來到了同樣的問題，結果發現this引導插件，需要的所有服務。它將保持打開多選的下拉菜單。該片段似乎有問題PR

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

的片段似乎有正確呈現mutliselect問題。

來源

2016-06-29 09:56:48 rottenoats

好吧，我的場景是當我將bootstrap-select或bootstrap-multiselect放在下拉菜單中時，它無法工作，因爲外部容器會被關閉。 – YinweiLi

結論：

@see dropdown source link

的下落事件將proppagating記錄作爲

$(document) 
    .on('click.bs.dropdown.data-api', clearMenus) 
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) 
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown) 
    .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown) 

}(jQuery);

所以有沒有方法把多選在引導下拉菜單。

來源

2016-06-30 03:59:59 YinweiLi

Bootstrap多選在引導下拉菜單中使用

回答

相關問題