0

I have this dropdown menu

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

whose <li> items are populated by jquery from a database table

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

I want to get the text of the <li> item clicked on by the user. I have tried 

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

I have tried the solutions in

and several others to no avail.

The alert box is coming up blank.

How can I get the value of the clicked item? I cannot use the select option. Thank you

BitsAndBytes
  • 11
  • 4

3 Answers3

1

So, I changed my code to 

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

Then I populated the dropdown-items from an sql table as follows:

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

then I processed the selection of the dropdown-item from the dropdown-menu as follows:

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

Here I split the click event into two. First event is the mouse hovering over the dropdown-menu then the user clicks on the dropdown-item. Now when I click on the dropdown-item the alert box returns the clicked value. This has solved my problem.

BitsAndBytes
  • 11
  • 4
0

The below code should work.

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

Here is the working demo of what you asked.

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

Rajeev
  • 1,376
  • 2
  • 15
  • 33
  • Thank you for your answer. I have edited my code and put it on jsfiddle and it works there too but not on my page. ```$(".dropdown-menu li").click(function(){ alert("click detected"); var sel=$(this).text(); alert(sel); }); ``` the click is now not being detected. – BitsAndBytes Mar 04 '20 at 13:41
  • Upvote and accept the answer so that others will find it helpful too. – Rajeev Mar 04 '20 at 13:42
  • Try adding alert box right after document ready and see if the function is loading correctly and then if the alert box shows up, then try adding an alert box, right after the CLICK function and see if the alert box works. – Rajeev Mar 04 '20 at 13:44
  • Alert after document ready is loading ok. Alert after click function is not showing. – BitsAndBytes Mar 04 '20 at 13:55
  • Tehn the problem should be in click(). Try changing it to $(".dropdown-menu li").on("click",(function(). Accept my answer if it helped – Rajeev Mar 05 '20 at 04:27
-1

Your cause

     var sel = $('.dropdown ').find(":selected").text();
Balamurugan A.
  • 37
  • 4