如何为现有下拉列表添加<a>元素选中功能并替换按钮显示内容

步骤1：添加选中状态的CSS样式 #

先给选中的下拉选项加个区分样式，方便用户识别当前选中项：

.dropdown-content a.active {
  background-color: #e0e0e0;
  font-weight: 600;
}

步骤2：修改JavaScript逻辑，添加选中处理函数 #

新增一个函数处理选项点击事件，同时调整原有逻辑确保选中状态和按钮文本正常更新：

function dropdownMenu() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 处理下拉选项选中逻辑
function selectOption(event) {
  // 阻止a标签默认跳转行为
  event.preventDefault();
  // 获取所有下拉选项
  const options = document.querySelectorAll('.dropdown-content a');
  // 移除所有选项的active类，确保只有一个选中项
  options.forEach(opt => opt.classList.remove('active'));
  // 给当前点击的选项添加active类
  event.target.classList.add('active');
  // 更新按钮的显示文本
  const dropBtn = document.querySelector('.dropbtn');
  dropBtn.textContent = event.target.textContent;
  // 主动关闭下拉菜单
  document.getElementById("myDropdown").classList.remove('show');
}

window.onclick = function(event) {
  // 点击区域不是按钮也不是下拉选项时，关闭菜单
  if (!event.target.matches('.dropbtn') && !event.target.closest('.dropdown-content')) {
    let dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      let openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

步骤3：给下拉选项绑定点击事件 #

修改HTML，给每个<a>标签添加点击事件绑定：

<button onclick="dropdownMenu()" class="dropbtn">ACTIVE</button>
<div id="myDropdown" class="dropdown-content">
  <a href="#" onclick="selectOption(event)">ONE</a>
  <a href="#" onclick="selectOption(event)">TWO</a>
  <a href="#" onclick="selectOption(event)">THREE</a>
</div>

完整可运行代码 #

JavaScript

function dropdownMenu() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function selectOption(event) {
  event.preventDefault();
  const options = document.querySelectorAll('.dropdown-content a');
  options.forEach(opt => opt.classList.remove('active'));
  event.target.classList.add('active');
  document.querySelector('.dropbtn').textContent = event.target.textContent;
  document.getElementById("myDropdown").classList.remove('show');
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.closest('.dropdown-content')) {
    let dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      let openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

CSS

.dropbtn {
  background: #F0F0F0;
  width: 262px;
  height: 40px;
  border: none;
  cursor: pointer;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  margin-left: 23px;
  margin-bottom: 10px;
}

.dropbtn:hover {
  background-color: #979797;
  transition: all ease 0.4s;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  width: 262px;
  height: 132px;
  position: absolute;
  background: #FFFFFF;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 1;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  margin-left: 23px;
}

.dropdown-content a {
  color: black;
  padding: 15px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #FAFAFA;
}

/* 选中状态样式 */
.dropdown-content a.active {
  background-color: #e0e0e0;
  font-weight: 600;
}

.show {
  display: block;
}

HTML

<button onclick="dropdownMenu()" class="dropbtn">ACTIVE</button>
<div id="myDropdown" class="dropdown-content">
  <a href="#" onclick="selectOption(event)">ONE</a>
  <a href="#" onclick="selectOption(event)">TWO</a>
  <a href="#" onclick="selectOption(event)">THREE</a>
</div>

核心逻辑说明 #

• 点击选项时先清空所有选项的active类，再给当前项添加，保证唯一选中状态
• 直接获取选项文本替换按钮内容，实现同步更新
• 调整全局点击判断，避免点击选项时重复触发菜单关闭

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