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点击而不是ul上触发点击事件。接下来，您要动态创建控件使用.on。

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

Answer 2

虽然听不到单击父元素而不是子事件是不正确的，但仍然可以使用以下代码完成您的要求。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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)是被点击的实际元素。

非常简单的解决方案，也可以很容易地转换为vanilla javascript。

JSfiddle example

如何获取选定的下拉值

4 个答案: