Question

我正在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>

Answer 1

它应该表现得那样，也许你在HTML表单中的下拉菜单中混淆了这个行为？

尝试bootstraps下拉演示 - http://getbootstrap.com/javascript/#dropdowns

Answer 2

我建议你采用原来的方式。是的，可能有一些功能无法提供开箱即用的全部功能，但您可以使用一些JQuery轻松实现它。只需将此添加到您的javascript文件中即可。

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

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

    return false;
});

请参阅我为使您的示例工作而做的演示 - JSFiddle

选择后，Twitter Bootstrap下拉列表不会更改显示

2 个答案: