获取点击下拉项的值

Question

我有这个下拉菜单

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

其 <li> 项目由来自数据库 table

的 jquery 填充

success:function(data){
$(".dropdown-menu").empty();
$.each(data, function(key, value){
     $(".dropdown-menu").append("<li>" + key +   "</li>"); 
});

我想获取用户点击的 <li> 项的文本。我试过了

$(document).ready(function () {  
      $(".dropdown-menu").click(function(){
            var sel=$(".dropdown-menu .selected").text();
            alert(sel);
       });
});

我已经尝试了

中的解决方案

jQuery Get Selected Option From Dropdown
How to get value of selected dropdown value on button click in jquery
Get selected text from a drop-down list (select box) using jQuery

和其他几个都无济于事。

警告框变为空白。

如何获取点击项的值？我无法使用 select option。谢谢

Answer 1

下面的代码应该可以工作。

jQuery(document).ready(function ($) {  
      jQuery(".dropdown-menu li").click(function(){
            var sel=$(this).text();
            alert(sel);
       });
});

这是您所要求的工作演示。

https://jsfiddle.net/rajeevRF/9h5d4fb3/3/

Answer 2

你的事业

     var sel = $('.dropdown ').find(":selected").text();

Answer 3

所以，我将代码更改为

<div class="dropdown">
    <div>
    <input class="form-control" name="query" placeholder="Search End User" data-toggle="dropdown">          
    <div class="dropdown-menu" >
    </div></div></div>

然后我从 sql table 填充 dropdown-items 如下：

success:function(data){
    $(".dropdown-menu").empty();
    $.each(data, function(key, value){
    $(".dropdown-menu").append("<button class='dropdown-item' type='button'>" + key + "</button>");});

然后我按如下方式处理 dropdown-menu 中的 dropdown-item 的选择：

$(document).ready(function () {  
    $(".dropdown-menu").hover(function(){ 
        $(".dropdown-item").on("click",(function(){
            alert("click detected");
            var sel=$(this).text();
            alert(sel);
      }));
      });
 });

这里我把点击事件一分为二。第一个事件是鼠标悬停在 dropdown-menu 上，然后用户单击 dropdown-item。现在，当我单击 dropdown-item alert box returns 单击的值时。这解决了我的问题。

获取点击下拉项的值

Get value of clicked dropdown item

jquery

jquery-selectors

drop-down-menu

dropdown