How to get selected dropdown value

Question

I have a dropdown menu like this:

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

which I am populating dynamically using this code:

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

And now when the user clicks on an <a> , I need to get the selected dropdown value. - I've tried this:

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

but it's not giving the selected value from the dropdown.

Answer 1

Several things missing in you code.

First ensure you are writing entire piece of code in document.ready ,then make sure you fire the click event on li click instead of ul .Next as you are creating the control dynamically use .on .

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

Answer 2

Though it is not correct to listen click on parent element rather than child event, still your requirement can be accomplished using following code.

Basically you can fetch actual element that is clicked from event data that is passed by click event by default.

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

You can get the selected drop-down value using the following code.

Please note, a reference of #selectedText is kept outside the event handler for a so no additional dom query is necessary.

 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

You could add a class/id to each option, and then add an event listener to that class, like this:

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) is the actual element that is being clicked.

Pretty simple solution, which could also easily be converted to vanilla javascript.

JSfiddle example