CODEWITHSUNDEEP
javascripthtml
sururu74
sururu74

Reputation: 11

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

Upvotes: 1

Views: 232

Answers (4)

Aleksandar Đokić
Aleksandar Đokić

Reputation: 2333

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>

Upvotes: 1

Mic
Mic

Reputation: 4004

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>

Upvotes: 1

Nishanth Matha
Nishanth Matha

Reputation: 6081

You can try innerText instead of innerHTML:

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

Upvotes: 0

Tommy Lee
Tommy Lee

Reputation: 794

Instead of innerHTML, try using textContent

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

Upvotes: 0

Related Questions