Twitter Bootstrap: How do I get the selected value of dropdown?

Question

I need to get the value a user selects from a twitter bootstrap dropdown. Once the user selects a value I want the dropdown to display that value. So, the user selects 'pending' then I want to change the selected dropdown value from that and, when the user completes the form, I want to retrieve the selected value. Would someone be able to point me in the right direction?

<div class="btn-group">
  <i class="dropdown-arrow dropdown-arrow-inverse"></i>
  <button class="btn btn-primary">status</button>
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-inverse">
    <li><a href="#fakelink">pending</a></li>
    <li><a href="#fakelink">active</a></li>
    <li><a href="#fakelink">discontinued</a></li>
  </ul>
</div>

Answer 1

I had the same issue. The solution is pretty easy and I think the answers above may be overcomplicating a bit.

Just use $(this).text()

Assign a class name to the "" bit then..

$(".yourUlClassName li a").click( function() {
    var yourText = $(this).text();
});

Answer 2

Bootstrap provides you with minimum required functionality for your implementation, they aren't dropdowns instead they are mere ul, li's with css applied on it and some events registered in the bootstrap plugin for toggling the button to display them as dropdown. This one you need to do on your own.

Set up some identifier to the status button say a className btnStatus and bind a click event to the dropdown links. and do something like this?

$('.dropdown-inverse li > a').click(function(e){
    $('.btnStatus').text(this.innerHTML);
});

Demo