Question

我尝试使用Bootstrap 4 Dropdown元素创建两个下拉列表，这两个列表都从firebase-datastore获取它们的主题。第一个（汽车品牌）中的所选项目应该设置第二个（汽车模型）下拉列表的内容。

但是我遇到问题，要抓住任何事件，其中包含有关所选下拉列表中哪个项目的信息。当试图捕捉<a>元素时，我没有发生任何事件。我在下面的代码中尝试将id="action-id"同时$('#action-id').click(function(e)和class="dropdown-item"同为$('.dropdown-item').click(function(e)，但没有成功。

$('.dd-select-make-menu').click(function(e) {
    var nameTarget1 = e.currentTarget;
    var nameTarget2 = e.relatedTarget;
    console.log(nameTarget1);
    console.log(nameTarget2);
    console.log(nameTarget1.innerHTML);
    console.log(nameTarget1.getAttribute("data-name"));
});

但是如果我试图抓住父$('.dd-select-make-menu').click(function(e)，我确实抓住了它并且可以触发该功能。但后来我得到了整个HTML结构，我无法获得有关点击哪个项目的信息。

HTML看起来像：

 <div class="dropdown dropDownMakeList" id="dd-select-make">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button" id="brands-select-button";">All Brands;</button>
        <div class="dropdown-menu dd-select-make-menu" role="menu" id="dd-select-make-menu">
            <a role="presentation" href="#" class="dropdown-item" id="action-id" data-name="SAAB">SAAB</a>
            <a role="presentation" href="#" class="dropdown-item" id="action-id" data-name="Volvo">Volvo</a>
    </div>
</div>

我没有运气就搜索并测试了很多变种。任何人都可以看到我做错了什么或者说我已经使用过其他一些BS4组件吗？

Answer 1

我认为你与$('.dd-select-make-menu').click(function(e)一致 - 你只需要检查e.target.innerHTML，你就会发现它会为你提供点击项目的文字。

在Bootstrap 4下拉菜单中捕获选择事件

1 个答案: