Get selectd list value in foundation dropdown

Question

I'm using foundation drop-down

You can have a look at it here:

http://foundation.zurb.com/docs/components/dropdown.html#

I've created a dropdown with the following code

<a href="#" data-dropdown="drop1" >Date Range  </a>
    <ul id="drop1" class="f-dropdown large date-menu" drop-down-content>
        <li id="custom">Custom</li>
        <li id="today">Today</li>
        <li id="yesterday">Yesterday</li>
        <li id="sundaytoToday">This Week(Sun-Today)</li>
        <li id="montoToday">This Week(Mon-Today)</li>
     </ul>

I want to get the value/id of the selected element

I've tried like below, but it's not working

$('#drop1').click(function(){
  var ss=$('#drop1').val();
  console.log(ss);  
});

I'm a newbie to programming any help appreciated.

Thanks in advance

UPDATE: How to close the dropdown on click?

Answer 1

You need .text() or .html() not .val() .

.val() works with form elements like input, select, radio, checkbox etc.

$('#drop1 li').click(function(){
  var ss = $(this).text(); //this refers to current element clicked here.
  //to get id
  var id = this.id;
  console.log(ss, id);  
});

“this” Keyword

Answer 2

here is correction

    $('#drop1 li').click(function(){
      var id=$(this).attr('id');//to get id of clicked element
      console.log(id);  
var h=$(this).text();//to get text of clicked element
      console.log(h);  
    });

update

    $('#drop1 li').click(function(){
          var id=$(this).attr('id');//to get id of clicked element
          console.log(id);  
    var h=$(this).text();//to get text of clicked element
          console.log(h);  
    $(this).parent().fadeOut(300);
$('.open').removeClass('open');
        });

Answer 3

as per doc , class open is added to selected element. you can get selected using:

 $('#drop1').click(function(){
   var ss=$('this).find('.open').html();
   console.log(ss);  
 });