这是无序列表:
<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
这是我用来获取文本并将其用作页面其他位置的标签的代码:
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";
});
它打印通用文本,但我希望它打印子类别。请提供一点帮助。
最佳答案
点击处理程序绑定(bind)到父级,因此您必须找到点击的 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 中更轻松地绑定(bind)到选择器
$('#liquor-category a').on('click', function (e) {
$('#category-name-box').text($(this).text());
});
关于javascript - 如何使用 jQuery 从下拉无序列表中获取文本值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36075662/