如何獲得所選的下拉值

Question

我有這樣一個下拉菜單：

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

這我填充動態使用此代碼：

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

現在當上<a>用戶點擊，我需要獲取選定的下拉值。 - 我試過這個：

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

但它沒有給出從下拉列表中選擇的值。

Answer 1

雖然聽單擊父元素而不是子事件是不正確的，但仍然可以使用以下代碼完成您的要求。

基本上，您可以從默認情況下通過單擊事件傳遞的事件數據中獲取單擊的實際元素。

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

你代碼中遺漏了幾件事。

首先確保你正在寫的代碼，整片的document.ready，然後確保你開槍li Click事件，而不是ul。接下來爲你創建的控制動態地使用.on。

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

Answer 3

您可以使用下面的代碼獲取選中下拉值。

請注意，#selectedText的引用保留在a的事件處理函數之外，因此不需要額外的dom查詢。

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

你可以一類/ ID添加到每個選項，然後添加一個事件偵聽器的那類，像這樣：

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)是被點擊的實際元素。

很簡單的解決方案，它也可以很容易地轉換爲香草的JavaScript。

JSfiddle example