無法從引導程序的下拉菜單中找到 select 項目

Question

我使用引導程序創建了一個下拉列表，但無法從代碼中的 select 項目如下

 var aos = ''; $('.dropdown-item').click(function(event) { event.preventDefault(); // Prevents scrolling to top of page aos = $(this).text(); // Get the text value of the thing that was clicked })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Project Role </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">PO</a></li> <li><a class="dropdown-item" href="#">SM</a></li> <li><a class="dropdown-item" href="#">AC</a></li> <li><a class="dropdown-item" href="#">Team Member</a></li> </div> </div>

Answer 1

嘗試 data-bs-toggle="dropdown" 切換下拉菜單

Answer 2

我想你想像 select 選項一樣使用它

這是解決方案。

您的 function 只需要多一行，如下所示

 var aos = ''; $('.dropdown-item').click(function(event) { event.preventDefault(); aos = $(this).text(); $('.dropdown-toggle').text(aos); // this is what you have missed. })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown"> Project Role </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">PO</a></li> <li><a class="dropdown-item" href="#">SM</a></li> <li><a class="dropdown-item" href="#">AC</a></li> <li><a class="dropdown-item" href="#">Team Member</a></li> </div> </div>

我只是將選項值設置為下拉按鈕。

Answer 3

你的代碼工作正常

嘗試使用如下所示的console.log 。

 var aos = ''; $('.dropdown-item').click(function(event) { event.preventDefault(); // Prevents scrolling to top of page aos = $(this).text(); // Get the text value of the thing that was clicked console.log(aos) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">PO</a></li> <li><a class="dropdown-item" href="#">SM</a></li> <li><a class="dropdown-item" href="#">AC</a></li> <li><a class="dropdown-item" href="#">Team Member</a></li> </div>