Javascript 无法正确识别下拉按钮菜单中的选择

使用twitter引导，我计划选择其中一个城市，并根据选择更改页面上的一些内容，但当我运行代码时，我得到的是所有城市，而不是我选择的城市。如何正确识别正确的城市。 （额外）如何确保选择现在高亮显示并具有glyphicon glyphicon映射标记

 <ul class="nav nav-pills">
    <li class="dropdown menu-btn">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-map-marker"></span> San Francisco<b class="caret"></b></a>
      <ul id="fooHub" class="dropdown-menu">
            <li> <a href="#">San Jose</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">New York City</a> </li>
            <li> <a href="#">Paris</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">Tokyo</a> </li>
      </ul>
    </li>
    </ul>

这是我在控制台上看到的

             San Jose 
             Silicon Valley 
             New York City 
             Paris 
             Silicon Valley 
             Tokyo 

不仅仅是“我选择的城市巴黎”。

当您选择

#startupHub

时，该函数输出此元素中包含的文本，在本例中，输出所有li元素

相反，选择定位元素并输出每个文本：

$（'ul.dropdown-menu>li>a'）。单击（函数（）{
//警报（$（this.text（））；
var，该值=$（此值）；
$（'.dropdown menu li a'）.removeAttr（'style'）；
css（{'background-color'：'yellow'}）；
})；

检查此演示

             San Jose 
             Silicon Valley 
             New York City 
             Paris 
             Silicon Valley 
             Tokyo 

$('#startupHub li').on('click', function(){
    console.log($(this).text());
});