![](/img/trans.png)
[英]javascript/jquery dropdown menu selection not passing GET request
[英]Dropdown menu selection using JavaScript without jQuery
我當前正在使用Bootstrap 4導航欄,並且具有一個帶有語言的下拉菜單,當選擇了下拉菜單選項時,將其顯示。
我確實使用過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>
您必須根據類名稱獲取元素,然后在其上添加事件偵聽器。
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);
}
您可以將點擊監聽器分配給如下所示的列表項
<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>
這是一個嘗試,但是我會說使用jq要簡單得多
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.