如何让下拉框（dropdown）选中的选项始终显示在下拉列表中

问题解决思路 #

不用在选中后移除已选项，直接通过CSS标记选中状态，让所有选项始终留在下拉列表里，用背景色区分已选和未选项。

完整代码示例 #

HTML结构 #

<div class="custom-dropdown">
  <div class="dropdown-trigger">请选择</div>
  <ul class="dropdown-menu">
    <li class="dropdown-option" data-value="t-shirt">T恤</li>
    <li class="dropdown-option" data-value="polo">Polo衫</li>
    <li class="dropdown-option" data-value="hoodie">连帽衫</li>
  </ul>
</div>

CSS样式 #

.custom-dropdown {
  position: relative;
  width: 200px;
}

.dropdown-trigger {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  display: none;
}

.dropdown-option {
  padding: 8px 12px;
  cursor: pointer;
}

/* 高亮已选中的选项 */
.dropdown-option.selected {
  background-color: #e8f4fd;
  color: #165dff;
}

.dropdown-menu.active {
  display: block;
}

JavaScript逻辑 #

const dropdown = document.querySelector('.custom-dropdown');
const trigger = dropdown.querySelector('.dropdown-trigger');
const options = dropdown.querySelectorAll('.dropdown-option');

// 点击触发框展开/收起下拉列表
trigger.addEventListener('click', () => {
  dropdown.querySelector('.dropdown-menu').classList.toggle('active');
});

// 处理选项选择逻辑
options.forEach(option => {
  option.addEventListener('click', () => {
    // 清除所有选项的选中状态
    options.forEach(opt => opt.classList.remove('selected'));
    // 标记当前选项为选中
    option.classList.add('selected');
    // 更新触发框显示的文本
    trigger.textContent = option.textContent;
    // 收起下拉列表
    dropdown.querySelector('.dropdown-menu').classList.remove('active');
  });
});

// 点击页面其他区域关闭下拉列表
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.querySelector('.dropdown-menu').classList.remove('active');
  }
});

重点说明 #

• 所有选项全程保留在下拉列表中，不会被移除或隐藏
• 用.selected类实现已选项的背景色高亮，符合你需求里的视觉效果
• 核心逻辑是只更新选中状态，不修改下拉列表的DOM结构

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