JavaScript：实现<select>滚动选项时实时触发事件监听器

原生<select>的下拉菜单属于浏览器系统级UI控件，无法直接监听鼠标悬停未选中选项、滚动浏览选项的动作——这些交互由系统处理，没有暴露对应的DOM事件，input事件也仅在选项被实际选中时触发，这就是你遇到问题的原因。

针对1000+选项的场景，推荐用自定义下拉组件替代原生select，既能实现滚动浏览时触发函数的需求，又能通过虚拟滚动优化性能。

实现方案：自定义下拉组件 #

1. HTML结构 #

<!-- 模拟原生select的触发框 -->
<div class="custom-select-trigger" id="selectTrigger">
  <span id="selectedText">请选择</span>
  <span class="arrow">▼</span>
</div>
<!-- 下拉面板，初始隐藏 -->
<div class="custom-select-dropdown" id="selectDropdown">
  <div class="dropdown-list" id="dropdownList"></div>
</div>

2. CSS样式（模拟原生select外观） #

.custom-select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}

.custom-select-dropdown {
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  background: white;
}

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

.dropdown-list .option:hover,
.dropdown-list .option.active {
  background-color: #e6f2ff;
}

3. JavaScript逻辑（含虚拟滚动优化） #

因为有1000+选项，直接渲染所有元素会导致性能问题，这里实现简单的虚拟滚动——仅渲染可见区域的选项：

const trigger = document.getElementById('selectTrigger');
const dropdown = document.getElementById('selectDropdown');
const listContainer = document.getElementById('dropdownList');
const selectedText = document.getElementById('selectedText');

// 模拟1000+选项数据
const options = Array.from({length: 1000}, (_, i) => ({
  value: `Option-${i+1}`,
  text: `选项${i+1}`
}));

// 虚拟滚动配置
const itemHeight = 32; // 每个选项的高度
const visibleCount = Math.floor(300 / itemHeight); // 可见区域能容纳的选项数

// 渲染可见区域的选项
function renderVisibleItems(startIndex) {
  listContainer.innerHTML = '';
  const endIndex = Math.min(startIndex + visibleCount, options.length);
  for (let i = startIndex; i < endIndex; i++) {
    const optionEl = document.createElement('div');
    optionEl.className = 'option';
    optionEl.dataset.value = options[i].value;
    optionEl.textContent = options[i].text;
    // 鼠标悬停时触发更新函数
    optionEl.addEventListener('mouseover', () => {
      updateChanges(options[i].value);
      // 高亮当前悬停的选项
      document.querySelectorAll('.option.active').forEach(el => el.classList.remove('active'));
      optionEl.classList.add('active');
    });
    // 点击选项时选中
    optionEl.addEventListener('click', () => {
      selectedText.textContent = options[i].text;
      dropdown.style.display = 'none';
      updateChanges(options[i].value);
    });
    listContainer.appendChild(optionEl);
  }
  // 调整容器内边距，模拟滚动效果
  listContainer.style.paddingTop = `${startIndex * itemHeight}px`;
  listContainer.style.paddingBottom = `${(options.length - endIndex) * itemHeight}px`;
}

// 下拉面板滚动事件，更新可见选项
dropdown.addEventListener('scroll', () => {
  const scrollTop = dropdown.scrollTop;
  const startIndex = Math.floor(scrollTop / itemHeight);
  renderVisibleItems(startIndex);
});

// 点击触发框，显示/隐藏下拉面板
trigger.addEventListener('click', () => {
  dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
  if (dropdown.style.display === 'block') {
    renderVisibleItems(0);
    dropdown.scrollTop = 0;
  }
});

// 点击外部区域关闭下拉面板
document.addEventListener('click', (e) => {
  if (!trigger.contains(e.target) && !dropdown.contains(e.target)) {
    dropdown.style.display = 'none';
  }
});

// 你的业务更新函数
function updateChanges(value) {
  console.log(`当前预览选项值：${value}`);
  // 这里添加你的实时效果逻辑
}

方案说明 #

• 完全自定义的交互逻辑，鼠标悬停任何选项时都会触发updateChanges函数，无需实际选中。
• 虚拟滚动仅渲染可见区域的选项，避免1000+元素导致的页面卡顿。
• 支持点击选中、外部点击关闭等原生select的基础功能，可根据需求扩展。

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