如何在HTML按钮中实现下拉选择？选中值无法显示问题求助

看起来你遇到的问题是下拉选项选中后无法同步到按钮上——这是因为默认的Bootstrap下拉组件不会自动帮你做这个值同步，需要我们加一点JavaScript逻辑来处理。我来给你修正代码并解释怎么做：

完整实现代码 #

<!-- 先确保引入Bootstrap的CSS和JS（如果还没引入的话） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="btn-group btn-group-sm" role="group">
  <!-- 小时选择按钮：给显示文本加一个span，方便后续修改 -->
  <button id="startHour" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span id="startHourText">hour</span>
  </button>
  <div class="dropdown-menu" aria-labelledby="startHour">
    <a class="dropdown-item" href="#">1</a>
    <a class="dropdown-item" href="#">2</a>
    <a class="dropdown-item" href="#">3</a>
    <!-- 更多小时选项 -->
  </div>

  <!-- 分钟选择按钮，同样的结构 -->
  <button id="startMinute" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span id="startMinuteText">minute</span>
  </button>
  <div class="dropdown-menu" aria-labelledby="startMinute">
    <a class="dropdown-item" href="#">00</a>
    <a class="dropdown-item" href="#">15</a>
    <a class="dropdown-item" href="#">30</a>
    <a class="dropdown-item" href="#">45</a>
    <!-- 更多分钟选项 -->
  </div>
</div>

<script>
// 原生JavaScript实现
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有下拉选项
  const dropdownItems = document.querySelectorAll('.dropdown-item');
  
  dropdownItems.forEach(item => {
    item.addEventListener('click', function(e) {
      // 阻止<a>标签默认的跳转行为
      e.preventDefault();
      
      // 获取当前选中的文本
      const selectedText = this.textContent.trim();
      
      // 找到对应的按钮：通过父级dropdown的aria-labelledby属性获取按钮ID
      const dropdownMenu = this.closest('.dropdown-menu');
      const buttonId = dropdownMenu.getAttribute('aria-labelledby');
      const buttonTextElement = document.querySelector(`#${buttonId} span`);
      
      // 更新按钮显示的文本
      if (buttonTextElement) {
        buttonTextElement.textContent = selectedText;
      }
    });
  });
});
</script>

关键要点说明 #

• HTML结构优化：在按钮内部添加了一个<span>标签来单独承载显示文本，这样我们修改文本时不会影响按钮的下拉触发功能（比如dropdown-toggle类和data-toggle属性）。
• 事件绑定：通过原生JavaScript监听所有下拉选项的点击事件，这样不管是小时还是分钟的选项，都能统一处理。
• 关联按钮与下拉菜单：利用下拉菜单的aria-labelledby属性，找到对应的按钮，确保选中的文本能同步到正确的按钮上。
• 阻止默认行为：因为下拉选项是<a>标签，点击会触发默认的锚点跳转（虽然href="#"只会跳转到顶部，但还是需要阻止，避免不必要的页面行为）。

如果你习惯用jQuery（Bootstrap 4及以下版本常用），也可以用更简洁的写法：

$(document).ready(function() {
  $('.dropdown-item').click(function(e) {
    e.preventDefault();
    const selectedText = $(this).text().trim();
    const buttonId = $(this).closest('.dropdown-menu').attr('aria-labelledby');
    $(`#${buttonId} span`).text(selectedText);
  });
});

这样修改后，你点击下拉菜单里的选项，对应的按钮就会显示你选中的小时或分钟值了。

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