Bootstrap Dropdown

by jasenhk

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<h2>Bootstrap Dropdown Label Change</h2>
<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <span id="dropdown-label">Action</span>
      <span class="caret"></span>
    </a>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#" data-target="#" tabindex="-1">Option 1</a></li>
        <li class="selected"><a href="#" data-target="#" tabindex="-1">Option 2</a></li>
        <li><a href="#" data-target="#" tabindex="-1">Option 3</a></li>
    </ul>
    
    <div id="msg"></div>
</div>

CSS

#msg {
    margin: 10px;
    padding: .5em;
    border: 1px solid navy;
    background-color: #eee;
}

.selected {
    background-color: #cdf;
}

JavaScript

$('.dropdown-toggle').dropdown();
SetLabel();

$(".dropdown-menu li").on("click", function() {
    $(".dropdown-menu li.selected").removeClass("selected");
    $(this).addClass("selected");
    SetLabel();
});

function SetLabel() {
    var label = $(".dropdown-menu li.selected").text();
    $("#dropdown-label").html(label);
    $("#msg").html(label);
    console.log(label);
}