如何让标准下拉菜单（select）在鼠标移出时自动关闭？

原生<select>的下拉面板属于浏览器原生控件，JavaScript没有直接API能控制它的展开/关闭状态，这就是你之前尝试多种方法无效的核心原因。要实现鼠标移出自动关闭的需求，只能通过自定义下拉组件替代原生select，以下是完整实现方案：

HTML结构 #

<div class="custom-select">
  <div class="select-trigger">Options</div>
  <div class="options-list">
    <div class="option" data-value="A">A</div>
    <div class="option" data-value="B">B</div>
    <div class="option" data-value="C">C</div>
    <div class="option" data-value="D">D</div>
  </div>
</div>
<!-- 隐藏input用于表单提交时传递选中值 -->
<input type="hidden" id="selected-value" name="selected-option">

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

.custom-select {
  position: relative;
  width: 150px;
  font-family: system-ui, sans-serif;
}

.select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.options-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  background: #fff;
  display: none;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.options-list.active {
  display: block;
}

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

.option:hover {
  background-color: #f5f5f5;
}

JavaScript交互逻辑 #

const selectTrigger = document.querySelector('.select-trigger');
const optionsList = document.querySelector('.options-list');
const options = document.querySelectorAll('.option');
const hiddenInput = document.getElementById('selected-value');

// 点击触发器切换下拉展开/收起状态
selectTrigger.addEventListener('click', () => {
  optionsList.classList.toggle('active');
});

// 选中选项后更新触发器文本并关闭下拉
options.forEach(option => {
  option.addEventListener('click', () => {
    selectTrigger.textContent = option.textContent;
    hiddenInput.value = option.dataset.value;
    optionsList.classList.remove('active');
  });
});

// 鼠标移出下拉面板时自动关闭
optionsList.addEventListener('mouseleave', () => {
  optionsList.classList.remove('active');
});

// 点击页面其他区域也能关闭下拉
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    optionsList.classList.remove('active');
  }
});

这个自定义组件不仅能满足鼠标移出关闭的需求，还能解决原生select跨浏览器样式不一致的问题，所有交互逻辑完全可控。

内容的提问来源于stack exchange，提问作者Q-Tip