如何在Bootstrap 4中获取下拉菜单的选中值？

首先，你需要先给下拉菜单里的每个选项添加自定义数据属性（比如data-value），因为原代码里的<a class="dropdown-item">没有存储对应值的属性，这样我们才能方便地获取到选中项的具体值。

步骤1：完善HTML结构 #

先给每个下拉选项加上data-value，用来存储该选项对应的值：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Material Type
  </a>
  <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
    <a class="dropdown-item" data-value="mud">Mud</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" data-value="cloth">Cloth</a>
    <div class="dropdown-divider"></div>
    <!-- 其他选项同理添加data-value -->
  </div>
</li>

步骤2：用JavaScript获取选中值 #

因为Bootstrap 4依赖jQuery，这里提供两种常用实现方式：

方式1：使用jQuery（推荐，适配Bootstrap生态） #

给所有下拉选项绑定点击事件，获取选中值：

// 绑定点击事件到所有dropdown-item
$('.dropdown-item').on('click', function() {
  // 获取选中项的data-value值
  const selectedValue = $(this).data('value');
  // 获取选中项的显示文本
  const selectedText = $(this).text().trim();

  // 这里可以根据需求处理选中值，比如打印、赋值给变量或提交表单
  console.log('选中的选项值：', selectedValue);
  console.log('选中的选项文本：', selectedText);

  // 可选：更新下拉按钮的文本，让用户直观看到选中的内容
  $(this).closest('.dropdown').find('.dropdown-toggle').text(selectedText);
});

如果你的下拉菜单是动态生成的（比如通过JS后续添加选项），要用事件委托来确保新添加的选项也能触发事件：

$(document).on('click', '.dropdown-item', function() {
  const selectedValue = $(this).data('value');
  // 后续操作和上面一致
});

方式2：使用原生JavaScript #

如果你不想依赖jQuery，也可以用原生JS实现：

// 获取所有下拉选项元素
const dropdownItems = document.querySelectorAll('.dropdown-item');

// 给每个选项绑定点击事件
dropdownItems.forEach(item => {
  item.addEventListener('click', function() {
    // 获取data-value值
    const selectedValue = this.dataset.value;
    // 获取显示文本
    const selectedText = this.textContent.trim();

    console.log('选中的选项值：', selectedValue);
    console.log('选中的选项文本：', selectedText);

    // 可选：更新下拉按钮文本
    const toggleBtn = this.closest('.dropdown').querySelector('.dropdown-toggle');
    toggleBtn.textContent = selectedText;
  });
});

同样，处理动态生成的选项可以用事件委托：

// 给下拉菜单容器绑定事件
const dropdownMenu = document.querySelector('.menu2');
dropdownMenu.addEventListener('click', function(e) {
  // 判断点击的元素是dropdown-item
  if (e.target.classList.contains('dropdown-item')) {
    const selectedValue = e.target.dataset.value;
    // 后续操作同上
  }
});

内容的提问来源于stack exchange，提问作者user9644880