使用不带jQuery的JavaScript的下拉菜单选择

Question

I am currently using Bootstrap 4 navbar and I have a dropdown with languages, when the dropdown menu option is selected, display it.

I did use jQuery but need to know how to do this without it.

 $(".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> 

Answer 1

You have to get the elements according to the class name and then add the event listener on that.

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);
}

Answer 2

you can assign click listener to list item like below

<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" onclick = "setLang('english')">EN</a></li>
        <li><a href="#" data-value="thai" onclick = "setLang('thai')">TH</a></li>
      </ul>
    </div>
<script>
function setLang(language){

    document.getElementById("dropdownMenu1").innerHTML = language;
}
</script>

Answer 3

Here is a try, but i would say that using jq is much simpler

  document.querySelectorAll(".dropdown-menu a").forEach(a=>{ // Assign a click to each element a.addEventListener("click", function(){ // get the closest eg (parents) and then seacrh for the button // when you wrote text i assumed you ment innerhtml. a.closest(".dropdown").querySelectorAll(".btn")[0].innerHTML = a.innerHTML; }) }) 

 <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>