如何获得选定的下拉值

Question

我有一个这样的下拉菜单：

<ul class="dropdown-menu" id="Appdropdown">
</ul>

我正在使用以下代码动态填充：

for (var i = 0; i < arrdropdownMenuItems.length; i++)
{
    dropdownMenuhtml += '<li><a href="#">' + arrdropdownMenuItems[i] + '</a></li>';
}
$('#ApplicationNames').css("visibility", "visible");
$('#Appdropdown').append(dropdownMenuhtml);

现在，当用户单击<a> ，我需要获取所选的下拉值。 -我已经试过了：

$('ul#Appdropdown').click(function ()
{
    var cache = $('.btn-primary').children();
    $('.btn-primary').text($(this).text()).append(cache);
}

但它没有提供下拉菜单中的选定值。

Answer 1

您的代码中缺少几件事。

首先，请确保您已在document.ready中编写完整的代码。然后，请确保在li click而不是ul上触发click事件。接下来，您将使用.on动态创建控件。

$(document).ready(function() {
    $('ul#Appdropdownli li').on('click', function() {            
        var selctedtext = $(this).find('a').html();           
        console.log(selctedtext);           
    });
});

Answer 2

尽管监听父元素而不是子事件是不正确的，但仍可以使用以下代码来完成您的要求。

基本上，您可以获取默认情况下从click事件传递的事件数据中单击的实际元素。

 $('ul#Appdropdown').click(function (ev) { var a = $(ev.target); if(a.is("a")) $('#selectedText').text($(a).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="dropdown-menu" id ="Appdropdown"> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> <li><a href="#">Test E</a></li> </ul> <div id="selectedText"></div> 

Answer 3

您可以使用以下代码获取所选的下拉值。

请注意，一个参考#selectedText保持在事件处理程序之外的a所以不需要额外的DOM查询是必要的。

 var selectedText = $('#selectedText'); $('#Appdropdown > li > a').on('click', function(event) { selectedText.text($(event.target).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="dropdown-menu" id="Appdropdown"> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> <li><a href="#">Test E</a></li> </ul> <div id="selectedText"></div> 

Answer 4

您可以为每个选项添加一个类/ id，然后向该类添加一个事件侦听器，如下所示：

HTML：

<ul class="dropdown-menu">
  <li><button class="dropdown-option">Option 1</button></li>
  <li><button class="dropdown-option">Option 2</button></li>
  <li><button class="dropdown-option">Option 3</button></li>
  <li><button class="dropdown-option">Option 4</button></li>
  <li><button class="dropdown-option">Option 5</button></li>
</ul>

JavaScript：

$('.dropdown-option').click(function () {
  console.log($(this).html());
});

$(this)是被单击的实际元素。

非常简单的解决方案，也可以轻松转换为原始javascript。

JSfiddle示例