簡體   English   中英

Bootstrap下拉菜單中使用的Bootstrap multiselect

[英]Bootstrap multiselect used in a Bootstrap dropdown-menu

當我獨立使用multiselect時,效果很好。

但是當我把它放在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();
});

我遇到了同樣的問題,發現這個引導程序插件可以處理所有這些問題。 它會保持下拉列表以進行多項選擇。 該片段似乎有問題

 <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的問題。

結論:

@see 下拉源鏈接

下拉事件將宣傳為文件

$(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);

因此沒有方法可以將多選項放入Bootstrap下拉菜單中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM