[英]How to get selected value from dynamic dropdown inside a div in javascript
I am trying to get the selected value from a div element which is dynamically populated with a dropdown li. 我试图从div元素中获取选定的值,该元素动态地填充有下拉菜单li。 This is on an existing website so we use additional javascript to add listeners to the div. 该网站位于现有网站上,因此我们使用其他JavaScript将侦听器添加到div中。 See attached code as example. 请参阅随附的代码作为示例。 When I click on "red s" area, I only get part of the html. 当我单击“红色s”区域时,我只得到html的一部分。 Ideally I want the entire text "red shoes" which I only get if I click on the "hoes" area. 理想情况下,我想要整个文本“ red shoes”,只有在单击“ hoes”区域时才能得到。 How do I get the entire text of the li element which is clicked? 如何获得被单击的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>
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>
Two parts to your problem: first, I'm seeing the click event's target is the span, not the li. 您的问题有两个部分:首先,我看到click事件的目标是范围,而不是li。 Second, as the others have pointed out, you have text and HTML intermingled. 第二,正如其他人所指出的,您将文本和HTML混合在一起。 You want the full text content, excluding the markup. 您需要全文内容,但不包括标记。 Either innerText or textContent will work - textContent will preserve line breaks however. innerText或textContent都可以工作-textContent将保留换行符。 Here's a working snippet. 这是一个工作片段。
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>
Instead of innerHTML
, try using textContent
代替innerHTML
,尝试使用textContent
ul.onclick = function(event) {
var target = getEventTarget(event);
alert(target.textContent);
};
You can try innerText
instead of innerHTML
: 您可以尝试用innerText
代替innerHTML
:
ul.onclick = function(event) {
var target = getEventTarget(event);
alert(target.innerText);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.