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");

}

Answer 2

更改

var selText = $(.dropdown-menu li a).text();

到

var selText = $('.dropdown-menu li a').text();

更新：当用户选择要与其他人区分的内容时，您需要添加一个类

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

并在你的其他功能中执行以下操作：

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

Answer 3

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

====================


function BusinessLogic(){
       var selText = $(".select").text();
       alert("Its displaying Entire List");
}

Answer 4

试试这个jsfiddle： -

$(".dropdown-menu").find("li a").click(function(){       
      $('.selectedLi').removeClass('selectedLi');     
      $(this).addClass('selectedLi'); 
});

$("#call").click(function(){
    BusinessLogic();
});

function BusinessLogic()
{ 
    var text = $('.dropdown-menu').find("li a.selectedLi").text(); 
    alert("selected Value:"+text);
}

click here to see working example: http://jsfiddle.net/BtkCf/147/

从jQuery或javascript中的Id获取<ul>的选定值</ul>

4 个答案: