如何从javascript中的div中的动态下拉列表中获取选定的值

Question

我试图从div元素中获取选定的值，该元素动态地填充有下拉菜单li。 该网站位于现有网站上，因此我们使用其他JavaScript将侦听器添加到div中。 请参阅随附的代码作为示例。 当我单击“红色s”区域时，我只得到html的一部分。 理想情况下，我想要整个文本“ red shoes”，只有在单击“ 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

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

您的问题有两个部分：首先，我看到click事件的目标是范围，而不是li。 第二，正如其他人所指出的，您将文本和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> 

Answer 3

代替innerHTML ，尝试使用textContent

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

Answer 4

您可以尝试用innerText代替innerHTML ：

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