在 jquery 或 javascript 中通过 Id 从 <ul> 获取选定的值

Question

我有一个ul是<ul>列表，我想获得不同的功能和所选择的值列表看起来象下面这样

<ul class="dropdown-menu" role="menu" id="ChooseAreaList">
   <li><a href="#">Select Destination</a></li>
   <li><a href="#">HSR</a></li>
   <li><a href="#">Bommanahalli</a></li>
   <li><a href="#">Kormangala</a></li>
</ul>

通过应用一些CSS,JS我能够获得这样的列表的选定值......

$(".dropdown-menu li a").click(function(){
   var selText = $(this).text();///User selected value...****
   $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

但是如果我试图在不同的函数中获得这个选定的值，它就不起作用......就像这样

function BusinessLogic(){
   var selText = $('.dropdown-menu li a').text();
   alert("Its displaying Entire List"+selText);
}

如何在不同的函数中获取该列表的选定值？

Answer 1

您可以class="selectedLi"输入a以指示下拉列表中最后选择的值，并在您的BusinessLogic函数中使用与 jquery 选择器相同的值：

$(".dropdown-menu li a").click(function(){
      // remove previously added selectedLi
      $('.selectedLi').removeClass('selectedLi');
      // add class `selectedLi`
      $(this).addClass('selectedLi');
      var selText = $(this).text();///User selected value...****
      $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+
      ' <span class="caret"></span>');
});

在下面的函数中，在 jquery 选择器中使用 selectedLi ：

function BusinessLogic()
{
 var selText = $('.dropdown-menu li a.selectedLi').text();

alert("Its displaying Entire List");

}