javascript - 使用没有 jQuery 的 JavaScript 的下拉菜单选择

Question

我目前正在使用Bootstrap 4 Navbar，并且在选择“下拉菜单”选项时，我的语言下拉列表，显示。

我确实使用过 jQuery，但需要知道如何在没有它的情况下执行此操作。

$(".dropdown-menu a ").click(function() {
  $(this).parents(".dropdown").find('.btn').text($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        English
        <span class="caret"></span>
      </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="english">EN</a></li>
    <li><a href="#" data-value="thai">TH</a></li>
  </ul>
</div>

标签： javascripthtmlarraysobjectbootstrap-4

Answer 1

您必须根据类名获取元素，然后在其上添加事件侦听器。

var divs = document.querySelectorAll('.dropdown-item');    
var myFunction = function() {
    alert('Click');
};
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', myFunction, false);
}