獲取基礎下拉列表selectd值

Question

我使用的基礎下拉

你可以看看這裏：

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

我已經創建了下面的代碼下拉

<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> 

我想選擇的元素的值/ ID

我試着像下面，但它不工作

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

我是一個新手，編程知道的任何幫助。

在此先感謝

UPDATE：如何關閉上點擊下拉？

Answer 1

您需要.text()或.html()而不是.val()。

.val()與表單元素就像input, select, radio, checkbox等

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

按照doc，類open被添加到選定的元素。您可以使用GET選擇：

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

Answer 3

這裏是修正

$('#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); 
    }); 

更新

$('#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'); 
     });