如何使用jQuery将Bootstrap下拉菜单连接到事件处理程序？

Question

Since a Bootstrap dropdown is actually a ul, I am confused on how to actually "hook it up" to functionality via jQuery.

For example, on the click of a submit button, I want something different to happen depending on which drop-down item is currently selected. See drop down code:

<div class="dropdown">
    <button id='businessType' class="btn btn-default dropdown-toggle" data-toggle="dropdown">Business Type
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Bar</a></li>
        <li><a href="#">Brewery</a></li>
        <li><a href="#">Food</a></li>
    </ul>
</div>

I want to do something like this:

var chosenType = $('businessType').val();

to get either Bar, Brewery, or Food and then use that chosenType variable to do something in my application but it's not working that way. I cannot seem to find this in the docs or any previous question which addresses this.

Answer 1

Need to use jQuery selector for single selection :

$($('#businessType').parent().find('ul.dropdown-menu li a')[0]).text()

for all selection :

   $.each($('#businessType').parent().find('ul.dropdown-menu li a'),function(i,v){ console.log($(v).text());
    })