How do I get text value from a dropdown unordered list using jQuery?

Question

This is the unordered list:

<ul id="all-categories" class="categories-list nav nav-tabs text-center">
 <li class="category" >
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Liquor</a>
         <ul id="liquor-category" class="dropdown-menu">
            <li><a href="#">Bourbon</a></li>
            <li><a href="#">Gin</a></li>
            <li><a href="#">Rum</a></li>
            <li><a href="#">Tequila</a></li> 
            <li><a href="#">Vodka</a></li> 
            <li><a href="#">Whiskey</a></li>  
          </ul>


  </li>
   ...
</ul

And this is the code I'm using to get the text and use it as a label elsewhere on the page:

var liquor_selected  = document.querySelector('#liquor-category');
      var selected = liquor_selected.addEventListener('click',function(e){
          document.getElementById("category-name-box").innerHTML = "Liquor Sub-Category Here";
      });

It prints the generic text, but I'd like it to print the sub-category. A little help please.

sorry, I forgot some of the code in the above example so have updated the example code. There is a nav bar with types of alcohol. One being "Liquor", The liquor category displays as a submenu when "Liquor" is clicked. I'm looking to grab the text of the selected subcategory (for ex: "Whiskey"). — Alex
– Alex, Commented Mar 19, 2016 at 17:00

TomFuertes · Accepted Answer · 2016-03-22 00:21:03Z

3

The click handler is bound to the parent so you have to find the e.target clicked:

var liquor_selected = document.querySelector('#liquor-category');
var selected = liquor_selected.addEventListener('click', function (e) {
  document.getElementById("category-name-box").innerHTML = e.target.innerText;
});

In jQuery you can do the same:

$('#liquor-category').on('click', function (e) {
  $('#category-name-box').text($(e.target).text());
});

or you can bind to the a selector more easily in jQuery

$('#liquor-category a').on('click', function (e) {
  $('#category-name-box').text($(this).text());
});

edited Mar 22, 2016 at 0:21

answered Mar 18, 2016 at 3:44

TomFuertes

7,2805 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Thanks Tom! The first answer did the trick. I haven't tried the others, but I am curious, is there any benefit to using the other methods you listed? What are the differences in the 3 approaches?

TomFuertes Over a year ago

jQuery stuff is a little more read-able. If it's on the page use it! Other than that having efficient event handlers is a little of an advanced topic that is explained pretty well in this video: bocoup.com/screencasts/more-efficient-event-handlers

Trim Kadriu · Accepted Answer · 2016-03-18 03:48:32Z

0

I'm assuming that you want to achieve the following (in jQuery)

Example in JsFiddle: https://jsfiddle.net/282u8avw/

HTML:

          <ul id="liquor-category" class="dropdown-menu">
            <li><a href="#">Bourbon</a></li>
            <li><a href="#">Gin</a></li>
            <li><a href="#">Rum</a></li>
            <li><a href="#">Tequila</a></li> 
            <li><a href="#">Vodka</a></li> 
            <li><a href="#">Whiskey</a></li>  
          </ul>
          <div id="category-name-box">

          </div>

Javascript/jQuery:

  $(document).ready(function() {
    $('#liquor-category a').click(function() {
      $('#category-name-box').text($(this).text());
    });
  })

answered Mar 18, 2016 at 3:48

Trim Kadriu

4613 silver badges20 bronze badges

Collectives™ on Stack Overflow

How do I get text value from a dropdown unordered list using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related