如何用JavaScript实现类似Microsoft Excel的带描述弹出列表？

一、手动实现思路与代码示例 #

Excel这种点击弹出的列表核心是点击触发显示自定义面板，面板内分选项区和描述区，hover选项时同步更新描述内容。

1. HTML结构 #

<!-- 触发按钮 -->
<button id="triggerBtn">选择选项</button>

<!-- 弹出面板 -->
<div id="dropdownPanel" class="dropdown-panel">
  <!-- 选项列表 -->
  <ul class="option-list">
    <li class="option-item" data-desc="这是选项A的详细描述内容，用于说明该选项的用途">选项A</li>
    <li class="option-item" data-desc="选项B适用于XX场景，具备XX特性">选项B</li>
    <li class="option-item" data-desc="选项C是高级功能，需要满足XX条件才能使用">选项C</li>
  </ul>
  <!-- 描述面板 -->
  <div class="desc-panel">
    <div class="desc-title">描述</div>
    <div id="descContent" class="desc-content">请选择一个选项查看描述</div>
  </div>
</div>

2. CSS样式 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

#triggerBtn {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.dropdown-panel {
  position: absolute;
  top: 40px;
  left: 0;
  width: 400px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
  flex-direction: row;
}

.option-list {
  width: 50%;
  border-right: 1px solid #eee;
  list-style: none;
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.option-item:hover {
  background-color: #e8f0fe;
}

.desc-panel {
  width: 50%;
  padding: 12px;
}

.desc-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}

.desc-content {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

3. JavaScript逻辑 #

const triggerBtn = document.getElementById('triggerBtn');
const dropdownPanel = document.getElementById('dropdownPanel');
const optionItems = document.querySelectorAll('.option-item');
const descContent = document.getElementById('descContent');

// 点击按钮显示/隐藏面板
triggerBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  dropdownPanel.style.display = dropdownPanel.style.display === 'flex' ? 'none' : 'flex';
});

// 点击选项更新描述，同时可以选择后关闭面板
optionItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    descContent.textContent = item.dataset.desc;
  });
  
  item.addEventListener('click', () => {
    triggerBtn.textContent = item.textContent;
    dropdownPanel.style.display = 'none';
  });
});

// 点击页面其他区域关闭面板
document.addEventListener('click', () => {
  dropdownPanel.style.display = 'none';
});

二、现成库推荐 #

如果不想手动实现，以下库可以通过自定义配置实现类似效果：

• Select2：支持自定义选项模板，可将描述内容嵌入弹出面板，通过配置dropdownParent和自定义templateResult渲染函数，把选项和描述并排展示，同时设置点击触发弹出而非默认下拉展开。
• Bootstrap Dropdown：利用其弹出容器的基础能力，自定义下拉菜单内容为“选项列表+描述面板”的结构，通过JS控制显示/隐藏，配合自定义样式调整成Excel的视觉风格。
• Popper.js：作为轻量级的弹出定位库，可快速实现点击触发的面板定位，自己编写选项和描述的内容逻辑，灵活性极高，完全可以复刻Excel的交互细节。

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