Twitter Bootstrap下拉菜單選擇後不會改變顯示

我使用的代碼就在Twitter Bootstrap組件頁面之外。當我從下拉框中選擇某些內容時，下拉菜單仍會顯示該字段的標題，而不是所選的值。Twitter Bootstrap下拉菜單選擇後不會改變顯示

我加載了bootstrap.min.js。它出現在Chrome開發者工具中。

您可以檢查出我的http://fmr.bluebaron.ca

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div>

來源

2015-02-10 Bluebaron

其演示應該那樣做，也許你是一個下拉菜單混淆了一個HTML表單的行爲？

嘗試白手起家下拉演示的 - http://getbootstrap.com/javascript/#dropdowns

來源

2015-02-10 20:57:31

我真的意識到，就在我張貼的答案。使用http://silviomoreto.github.io/bootstrap-select/ – Bluebaron 2015-02-10 21:00:41

很酷，如果答案很有用，您可以選中勾號勾選，以便其他遇到問題的人可以看到正確的解決方案 – 2015-02-10 21:03:58

是的。我之前試過，但它說我必須等6分鐘。 – Bluebaron 2015-02-10 21:14:34

我會建議你去原始的方式。是的，可能有一些功能不提供全部功能，但您可以通過一些JQuery輕鬆實現。只需在您的JavaScript文件中添加此項。

$(".dropdown > ul > li > a").on("click", function(){ 

    var $a = $(this); 
    $("#dropdownMenu1").text($a.html()); 
    $(".dropdown").removeClass("open"); 

    return false; 
});

看到這個演示中，我提出讓你的工作例如 - JSFiddle

來源

2015-02-10 21:14:24 Sam

Twitter Bootstrap下拉菜單選擇後不會改變顯示

回答

相關問題