无法从引导程序的下拉菜单中选择项目

Posted 2023-03-21

【中文标题】无法从引导程序的下拉菜单中选择项目

【英文标题】：Not able to select item from dropdown menu of bootstrap

【发布时间】：2022-01-18 08:27:00

【问题描述】：

我使用 bootstrap 创建了一个下拉菜单，但无法从下面的代码中选择项目

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>

【问题讨论】：

我能够运行您的代码并获取 aos 变量的值，该变量是单击的下拉项的文本。之后你应该做什么？

“选择”是什么意思？另外，你的代码对我来说也很好用：试试alert(aos)——它显示了我点击的项目

当我尝试从下拉列表中选择项目时，它只是显示项目角色而不是我选择的项目抱歉我编辑了代码，因为我忘记添加下拉按钮

您缺少 Popper.js 库。浏览器控制台显示：Uncaught TypeError: Bootstrap's dropdowns require Popper.js

我已经添加了，但问题仍然没有解决。

【参考方案1】：

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

这里是解决方案。

您的函数只需要多一行，如下面的 sn-p

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>

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

【参考方案2】：

您的代码运行良好

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

【讨论】：

那没有显示 Bootstrap 下拉菜单

【参考方案3】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

data-bs-toggle="dropdown" 适用于 Bootstrap 5。该操作使用的是 Bootstrap 4，因此使用 data-toggle="dropdown" 是正确的