How to get selected value from dynamic dropdown inside a div in javascript

Question

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?

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>

Possible duplicate of [How can get the text of a div tag using only javascript (no jQuery)](http://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — Tommy Lee, Aug 05 '16 at 01:01
@TommyLee there's another part to this problem. EventTarget isn't always the li. — Mic, Aug 05 '16 at 01:14

Aleksandar Đokić · Answer 1 · 2016-08-05T10:46:42.467

1

Edited with 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>

edited Aug 05 '16 at 10:46

answered Aug 05 '16 at 01:07

Aleksandar Đokić

2,118
17
35

Doesn't work if you click on any of the "red s" text. – Owen Aug 05 '16 at 01:42
1

@AleksandarĐokić I can verify that is does appear to work now as the OP asked. I would say however that this question wasn't tagged as jQuery, nor has the OP indicated that it's presently available. Adding another 3rd party dependency for a small task that's easily accomplished without it seems like a poor recommendation. – Mic Aug 05 '16 at 16:03
Ah, thanks for that. If the OP is working on a page that already uses jQuery, I would certainly endorse this solution. I think if that's the case, and this answer is selected, then the question should be tagged as jQuery so that it's properly categorized though. – Mic Aug 05 '16 at 16:59

score 1 · Answer 2 · answered Aug 05 '16 at 01:09

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.

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>

score 0 · Answer 3 · answered Aug 05 '16 at 01:02

0

Instead of innerHTML, try using textContent

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

answered Aug 05 '16 at 01:02

Tommy Lee

794
2
11
30

score 0 · Answer 4 · answered Aug 05 '16 at 01:05

0

You can try innerText instead of innerHTML:

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

answered Aug 05 '16 at 01:05

Nishanth Matha

5,993
2
19
28

How to get selected value from dynamic dropdown inside a div in javascript

4 Answers4