Javascript 如何使用jQuery从无序下拉列表中获取文本值？

以下是无序列表：

<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

---

它打印一般文本，但我希望它打印子类别。请提供一些帮助。

单击处理程序已绑定到父级，因此您必须找到已单击的e.target：

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

在jQuery中，您可以执行相同的操作：

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

或者，您可以在jQuery中更轻松地绑定到选择器

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

---

单击处理程序绑定到父级，因此您必须找到已单击的e.target：

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

在jQuery中，您可以执行相同的操作：

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

或者，您可以在jQuery中更轻松地绑定到选择器

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

---

我假设您希望实现以下目标（在jQuery中）

JSFIDLE中的示例：

HTML:

---

我假设您希望实现以下目标（在jQuery中）

JSFIDLE中的示例：

HTML:

---

子类别是什么意思？对不起，我忘记了上面示例中的一些代码，因此更新了示例代码。有一个有各种酒精的导航酒吧。一个是“酒”，单击“酒”时，酒类别显示为子菜单。我想抓取所选子类别（例如：“威士忌”）的文本。你对子类别的意思是什么？对不起，我忘记了上面示例中的一些代码，因此更新了示例代码。有一个有各种酒精的导航酒吧。一个是“酒”，单击“酒”时，酒类别显示为子菜单。我正在寻找所选子类别的文本（例如：“威士忌”）。谢谢汤姆！第一个答案奏效了。我没有试过其他方法，但我很好奇，使用你列出的其他方法有什么好处吗？这三种方法的区别是什么？jQuery的内容更易于阅读。如果它在页面上，请使用它！除此之外，拥有高效的事件处理程序是一个高级主题，本视频对此进行了很好的解释：谢谢Tom！第一个答案奏效了。我没有试过其他方法，但我很好奇，使用你列出的其他方法有什么好处吗？这三种方法的区别是什么？jQuery的内容更易于阅读。如果它在页面上，请使用它！除此之外，拥有高效的事件处理程序是一个高级主题，本视频对此进行了很好的解释：