如何实现select标签的option选项双列并排展示？

原生select的限制 #

原生<select>标签的下拉选项列表属于浏览器原生渲染的UI控件，样式和布局逻辑由浏览器内核直接控制，无法通过常规CSS设置为双列布局，不存在兼容全浏览器的原生实现方案。

可行替代方案 #

可以用普通DOM元素模拟下拉组件的交互逻辑，完全自定义布局来实现需求：

• 用<div>或<button>作为触发区域，显示当前选中值
• 下拉面板用普通<div>包裹，通过CSS网格（Grid）或弹性布局（Flex）实现双列布局
• 自行实现点击展开/收起、选项选中、点击外部收起等基础交互

最简实现代码示例 #

<!-- 模拟下拉结构 -->
<div class="custom-select">
  <div class="select-trigger">请选择</div>
  <div class="select-panel">
    <div class="option">option1</div>
    <div class="option">option2</div>
    <div class="option">option3</div>
    <div class="option">option4</div>
    <!-- 隐藏的原生select用于表单提交，可选 -->
    <select class="hidden-select" name="select-value" style="display:none;">
      <option value="option1">option1</option>
      <option value="option2">option2</option>
      <option value="option3">option3</option>
      <option value="option4">option4</option>
    </select>
  </div>
</div>

<style>
.custom-select {
  position: relative;
  width: 300px;
}
.select-trigger {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
}
.select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px;
  display: none;
  /* 核心双列布局配置 */
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.custom-select.open .select-panel {
  display: grid;
}
.option {
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 2px;
}
.option:hover {
  background: #f3f4f6;
}
</style>

<script>
const select = document.querySelector('.custom-select')
const trigger = select.querySelector('.select-trigger')
const options = select.querySelectorAll('.option')
const hiddenSelect = select.querySelector('.hidden-select')

// 展开/收起逻辑
trigger.addEventListener('click', () => select.classList.toggle('open'))

// 选项选中逻辑
options.forEach((option, index) => {
  option.addEventListener('click', () => {
    trigger.textContent = option.textContent
    hiddenSelect.selectedIndex = index
    select.classList.remove('open')
  })
})

// 点击外部收起逻辑
document.addEventListener('click', e => {
  if(!select.contains(e.target)) select.classList.remove('open')
})
</script>

内容的提问来源于stack exchange，提问作者Kwenziwa Lizwi Khanyile