无法从 bootstrap 的下拉菜单中选择 select 项

Question

我已经使用 bootstrap 创建了一个下拉列表，但无法 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

您的代码运行良好

尝试使用 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>

Answer 2

尝试 data-bs-toggle="dropdown" 切换下拉菜单

Answer 3

我认为您想像 select 选项一样使用它

这是解决方案。

你的函数只需要像下面的代码片段一样多一行

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>

我只是将选项值设置为下拉按钮。

无法从 bootstrap 的下拉菜单中选择 select 项

Not able to select item from dropdown menu of bootstrap

javascript

bootstrap-4