Bootstrap Dropdown selected item

Question

我最近開始使用bootstrap（https://getbootstrap.com），我正在研究下拉菜單功能。

我不知道我是否錯過了一些東西，但我會認爲下拉菜單按鈕應顯示已選擇的內容。舉例來說，如果我有以下下拉

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」，以便用戶知道什麼被選中，而在我的下拉當用戶點擊該項目時，下拉菜單會關閉，文本不會更改。這似乎是應該發生的基本事情，所以我認爲我錯過了一些東西，但getbootstrap網站上的示例似乎顯示了相同的事情，事實是它這樣做，我沒有看到下拉的點。

當爲此搜索時，唯一的實現似乎是長時間令人費解的JavaScript來做我想要發生的事情，這是正確的還是有什麼我失蹤的地方？

謝謝

Answer 1

根據您的描述，您需要的功能是一個選擇框。引導程序下拉菜單更適用於摺疊列表（請考慮導航欄）。

你可以使用像bootstrap-select這樣的插件，或者你可以編寫自己的功能（我會建議在你的功能中編寫）。

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

基本上你只是聽一個onclick爲li項列表的，那麼ul文本改變對什麼li的。

Answer 2

聽起來像也許你正在尋找一個插件。 我真的很喜歡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>

Answer 3

引導程序下拉列表是有一個導航/菜單是風格一致與其他按鈕。

如果您希望它具有「選擇」行爲，它並不是真正的很多「長時間的複雜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，選擇輸入是永遠存在的「選擇」的行爲了。