Bootstrap Dropdown選定的項目

Question

我最近開始使用Bootstrap，正在研究下拉菜單功能。

我不知道是否缺少某些內容，但我本以為下拉菜單按鈕應該顯示已選擇的內容。 例如，如果我有以下下拉列表

Select Item <---This is the button
-Item 1 <---This is the item
-Item 2 <---This is the item
-Item 3 <---This is the item

如果用戶選擇“項目1”，那么我希望按鈕文本更改為“項目1”，以便用戶知道所選擇的內容，而在我的下拉菜單中，當用戶單擊該項目時，下拉菜單將關閉，文本不會沒改變。 這似乎應該發生一些基本的事情，所以我認為我缺少了一些東西，但是Bootstrap網站上的示例似乎也顯示了同樣的事情，事實上它做到了這一點，我看不到下拉菜單的意義。

當對此進行谷歌搜索時，唯一的實現似乎是冗長的javascript來完成我期望發生的事情，這是正確的還是我在某個地方缺少什么？

Answer 1

根據描述，所需的功能是一個選擇框。 引導下拉列表更適合折疊列表（請考慮導航欄）。

您可以使用bootstrap-select之類的插件，也可以編寫自己的功能（我建議您編寫功能）。

這是一個模擬選擇框的小樣機： https : //jsfiddle.net/eanzfcu1/

基本上，您只是在監聽列表中li項的onclick ，然后將ul文本更改為li的內容。

Answer 2

Bootstrap下拉菜單用於導航/菜單，其樣式與其他按鈕一致。

如果您希望它具有“選擇”行為，則實際上並不是很多“冗長的javascript”。 只需幾行jQuery即可將其連接：：

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle')
      .html(selText+' <span class="caret"></span>');
});

http://www.codeply.com/go/Msi58Gy11u

OFC，對於“選擇”行為，選擇輸入也始終存在。

Answer 3

聽起來好像您正在尋找插件。 我真的很喜歡bootstrap-multiselect。

這是它的鏈接。

http://davidstutz.github.io/bootstrap-multiselect/

我復制粘貼下面的簡單示例之一，只運行代碼片段

  $(document).ready(function() { $('#example-getting-started').multiselect(); }); 

 <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.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <select id="example-getting-started" > <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select>