CODEWITHSUNDEEP
twitter-bootstrap
Bluebaron
Bluebaron

Reputation: 2506

Twitter Bootstrap dropdown not changing display after select

I'm using code right off the Twitter Bootstrap components page. When I select something from the dropdown box the dropdown still displays the title of the field and not the value selected.

I have the bootstrap.min.js loaded. It shows up in Chrome Developer Tools.

You can check out my demo on 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>

Upvotes: 0

Views: 1585

Answers (2)

Sam
Sam

Reputation: 4484

I would recommend going your original way. Yes, there might be some features that does not provide the entire functionality out of the box but you can easily implement it with a bit of JQuery. Just add this in your javascript file.

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

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

    return false;
});

See this demo I made to get your example working - JSFiddle

Upvotes: 1

Michael Coleman
Michael Coleman

Reputation: 3398

Its supposed to behave like that, maybe you are confusing the behaviour with a dropdown menu in an HTML form?

Try bootstraps drop down demo's - http://getbootstrap.com/javascript/#dropdowns

Upvotes: 2

Related Questions