如何获得选定的下拉值

How to get selected dropdown value

本文关键字：何获得      更新时间：2023-09-26

我有一个像这样的下拉菜单:

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

但是它没有给出从下拉菜单中选择的值

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

基本上你可以从click event传递的事件数据中获取被点击的实际元素。

$('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>

代码中缺少的一些东西

首先确保您在document.ready中编写整个代码，然后确保您在li单击而不是ul上触发单击事件。接下来，当您使用.on动态创建控件时。

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

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

请注意，#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>

可以为每个选项添加一个类/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示例

相关文章：