求助：点击时双向（上下）展开的Select Box实现方案

这个双向展开的下拉需求确实挺特别的，原生<select>肯定没法直接做到，得咱们自己动手撸一个自定义组件才行。我给你整理了一个完整的实现方案，你可以直接拿去改改就能用：

核心思路 #

原生下拉框的行为是固定的，所以我们需要完全自定义一个组件：

• 用一个容器模拟选择框的触发区域
• 把选项拆分成上下两部分，分别控制向上/向下展开的样式
• 通过JavaScript处理点击展开/收起、选项选择以及外部点击关闭的逻辑

代码实现示例 #

HTML结构 #

<div class="dual-select-container">
  <!-- 选择框触发区域 -->
  <div class="select-trigger" id="selectTrigger">
    <span id="selectedValue">请选择选项</span>
    <span class="arrow">▼</span>
  </div>
  <!-- 选项容器，包含上下两个列表 -->
  <div class="options-container" id="optionsContainer">
    <div class="options-top" id="optionsTop"></div>
    <div class="options-bottom" id="optionsBottom"></div>
  </div>
</div>

CSS样式 #

.dual-select-container {
  position: relative;
  width: 220px;
  margin: 60px auto;
}

.select-trigger {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  transition: border-color 0.2s;
}

.select-trigger:hover {
  border-color: #888;
}

.options-container {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
}

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

.options-top {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 10px;
  transform: translateY(-100%);
}

.options-bottom {
  max-height: 120px;
  overflow-y: auto;
}

.option-item {
  padding: 10px 14px;
  border: 1px solid #eee;
  border-bottom: none;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.2s;
}

.option-item:last-child {
  border-bottom: 1px solid #eee;
}

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

JavaScript逻辑 #

// 模拟选项数据，你可以替换成自己的业务数据
const options = [
  "选项1", "选项2", "选项3", "选项4", "选项5",
  "选项6", "选项7", "选项8", "选项9", "选项10"
];

// 获取DOM元素
const trigger = document.getElementById('selectTrigger');
const optionsContainer = document.getElementById('optionsContainer');
const optionsTop = document.getElementById('optionsTop');
const optionsBottom = document.getElementById('optionsBottom');
const selectedValue = document.getElementById('selectedValue');

// 拆分选项：一半在上，一半在下（奇数个时上半部分多一个）
const splitIndex = Math.ceil(options.length / 2);
const topOptions = options.slice(0, splitIndex).reverse(); // 反转后，最上方选项贴近触发框
const bottomOptions = options.slice(splitIndex);

// 渲染选项列表
function renderOptions() {
  // 渲染上半部分选项
  topOptions.forEach(opt => {
    const item = document.createElement('div');
    item.className = 'option-item';
    item.textContent = opt;
    item.addEventListener('click', () => selectOption(opt));
    optionsTop.appendChild(item);
  });

  // 渲染下半部分选项
  bottomOptions.forEach(opt => {
    const item = document.createElement('div');
    item.className = 'option-item';
    item.textContent = opt;
    item.addEventListener('click', () => selectOption(opt));
    optionsBottom.appendChild(item);
  });
}

// 选择选项后的处理逻辑
function selectOption(value) {
  selectedValue.textContent = value;
  optionsContainer.classList.remove('active');
}

// 切换展开/收起状态
trigger.addEventListener('click', () => {
  optionsContainer.classList.toggle('active');
});

// 点击外部区域收起下拉框
document.addEventListener('click', (e) => {
  if (!trigger.contains(e.target) && !optionsContainer.contains(e.target)) {
    optionsContainer.classList.remove('active');
  }
});

// 初始化渲染选项
renderOptions();

关键细节说明 #

• 选项拆分：用Math.ceil处理奇数个选项的情况，让上半部分多一个，视觉上更平衡
• 上半部分反转：因为是向上展开，反转后原列表的第一个选项会出现在最靠近触发框的位置，符合用户操作习惯
• 滚动处理：给上下选项容器设置最大高度和滚动条，避免选项过多时页面被撑满
• 交互优化：添加hover效果和过渡动画，让组件更贴近原生下拉框的体验

你可以根据自己的需求调整样式（比如颜色、尺寸、圆角等），也可以扩展功能（比如添加搜索框、支持多选等）。如果需要兼容旧浏览器，可能需要调整transform这类CSS属性的兼容性写法。

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