자바 스크립트에서 div 내 동적 드롭 다운에서 선택된 값을 얻는 방법

Question

드롭 다운 li로 동적으로 채워지는 div 요소에서 선택한 값을 가져 오려고합니다. 이것은 기존 웹 사이트에 있으므로 추가 자바 스크립트를 사용하여 div에 리스너를 추가합니다. 첨부 된 코드는 예제를 참조하십시오. "red s"영역을 클릭하면 html의 일부만 가져옵니다. 이상적으로 나는 "hoes"영역을 클릭하면 얻을 수있는 전체 텍스트 "빨간 신발"을 원합니다. 클릭 한 li 요소의 전체 텍스트는 어떻게 가져 옵니까? 예를 들어

:

function getEventTarget(e) { 
 
    e = e || window.event; 
 
    return e.target || e.srcElement; 
 
} 
 

 
var ul = document.getElementById('search_suggestion'); 
 
ul.onclick = function(event) { 
 
    var target = getEventTarget(event); 
 
    alert(target.innerHTML); 
 
};

<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt 
 
     <div class="brm-autosuggest-nub"></div></li>  
 
    <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>

Answer 1

대신 innerHTML이 textContent

ul.onclick = function(event) { 
    var target = getEventTarget(event); 
    alert(target.textContent); 
}; 

Answer 2

를 사용해보십시오 당신은 innerHTML 대신 innerText을 시도 할 수 있습니다 :

Answer 3

이 문제에 jQuery로

$('li').on('click',function() { 
 
    alert($(this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li>  <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>

Answer 4

두 부분을 편집 : 첫째, 내가 클릭 이벤트의 대상이 범위가 아닌 리입니다보고 있어요. 둘째, 다른 사람들이 지적했듯이 텍스트와 HTML이 혼합되어 있습니다. 마크 업을 제외한 전체 텍스트 내용을 원합니다. innerText 또는 textContent가 작동합니다 - 그러나 textContent는 줄 바꿈을 유지합니다. 다음은 작동중인 스 니펫입니다.

function getEventTarget(e) { 
 
    e = e || window.event; 
 
    return e.target || e.srcElement; 
 
} 
 

 
var ul = document.getElementById('search_suggestion'); 
 
ul.onclick = function(event) { 
 
    var target = getEventTarget(event); 
 
    if(target.tagName === 'SPAN') 
 
    target = target.parentNode; 
 
    alert(target.textContent); 
 
};

<div id="search_suggestion"> 
 
    <ul class="suggestion_keyword"> 
 
    <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li>  <li><span class="keywords">red s</span>horts</li> 
 
    <li><span class="keywords">red s</span>hoes</li> 
 
    <li><span class="keywords">red s</span>hirt</li>    
 
    </ul> 
 
</div>