나는이 같은 드롭 다운 메뉴가 드롭 다운 값

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 코드의 전체 조각을 작성하는 보장 동적 .on을 사용하여 컨트롤을 만드는 당신이 ul 다음 내용 대신 li 클릭에 클릭 이벤트를 해고해야합니다.

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

자바 스크립트 :

$('.dropdown-option').click(function() { 
    console.log($(this).html()); 
}); 

$(this)은 클릭되는 실제 요소입니다.

바닐라 자바 ​​스크립트로 쉽게 변환 할 수있는 아주 간단한 솔루션입니다. 당신이 원하는

JSfiddle example