选择特定的下拉菜单项后，下拉按钮的值不会改变

Posted 2023-03-05

【中文标题】选择特定的下拉菜单项后，下拉按钮的值不会改变

【英文标题】：Dropdown button value does not change upon selecting a particular dropdown menu item

【发布时间】：2022-01-22 07:07:18

【问题描述】：

我目前在我的 Angular 项目中使用 bootstrap v4.5，每当我点击下拉按钮时，无论我点击的是什么下拉菜单项，它的值都保持不变。我希望下拉按钮的文本更改为我单击的任何下拉菜单项。有人可以帮我解决这个问题吗？

我的 html 代码：

---

 <div class="dropdown">
  <button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    2021
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item">2011</a>
    <a class="dropdown-item">2012</a>
    <a class="dropdown-item">2013</a>
    <a class="dropdown-item">2014</a>
  </div>
</div>

---

【问题讨论】：

你需要使用选择菜单而不是下拉菜单，它们不一样。

你已经标记了 Angular 和 AngularJS，你使用的是哪一个？请更正标签，谢谢！

我正在使用 Angular(9.1.9)。

【参考方案1】：

您正在寻找的功能可以在 HTML 标记中找到

<select>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
</select>

【参考方案2】：

Bootstrap 只是一个样式库（带有一些 javascript，但仅用于交互） 此模板展示了如何创建下拉菜单，但对于逻辑部分，您必须将其与前端框架集成。

在原生 JavaScript 中，您可以在检测到点击时直接更新文本。使用 Angular，我想有可能使它具有反应性。您应该能够创建一个动态状态，该状态反映在按钮文本中，并在单击列表时更新。

我不是 Angular 专家，所以我会让专家回答你这一点

【参考方案3】：

有时您可能想用dropdown 模拟<select> 元素。以下是使用 angularJS 实现这一目标的方法。

angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) 
    $scope.years = [];
    let y = 2010,
      thisyear = new Date().getFullYear();
    while (++y <= thisyear) $scope.years.push(y);
    $scope.chosenYear = thisyear;
    $scope.chooseYear = function(y) 
      $scope.chosenYear = y;
    

  ]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div ng-app="myApp" ng-controller="myController">
  <div class="dropdown">
    <button class="btn btn-light dropdown-toggle mx-5 w-75 d-flex justify-content-between align-items-center" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    chosenYear
  </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
      <a class="dropdown-item" ng-repeat='year in years' href="#" ng-click='chooseYear(year)'>year</a>
    </div>
  </div>
</div>

【讨论】：

我没有使用 Angular JS。你能帮忙解决一下角度问题吗？