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

I am trying to get the selected value from a div element which is dynamically populated with a dropdown li. This is on an existing website so we use additional javascript to add listeners to the div. See attached code as example. When I click on "red s" area, I only get part of the html. Ideally I want the entire text "red shoes" which I only get if I click on the "hoes" area. How do I get the entire text of the li element which is clicked?

我试图从div元素中获取所选值,该元素使用下拉列表动态填充。这是在现有的网站上,所以我们使用额外的javascript将侦听器添加到div。请参阅附件代码示例。当我点击“红色”区域时,我只获得了部分HTML。理想情况下,我想要整个文本“红鞋”,如果我点击“锄头”区域,我只能得到它。如何获取单击的li元素的整个文本?

For example:

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>

4 个解决方案

#1

Two parts to your problem: first, I'm seeing the click event's target is the span, not the li. Second, as the others have pointed out, you have text and HTML intermingled. You want the full text content, excluding the markup. Either innerText or textContent will work - textContent will preserve line breaks however. Here's a working snippet.

问题的两个部分:首先,我看到点击事件的目标是跨度,而不是李。其次,正如其他人所指出的那样,你有文字和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>

#2

Edited with jquery

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

#3

Instead of innerHTML, try using textContent

而不是innerHTML,尝试使用textContent

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

#4

You can try innerText instead of innerHTML:

您可以尝试使用innerText而不是innerHTML:

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