React项目中如何实现select选中显示短文本、下拉显示长描述？

你不需要用隐藏option这种容易出问题的方法，推荐用「自定义显示区域+原生select透明覆盖」的方案，既保留原生select的交互逻辑，又能实现你要的显示效果：

步骤1：定义选项数据 #

先把每个选项的短文本、长描述和对应值整理成数组：

const options = [
  { value: 'a', shortLabel: 'A', longLabel: 'A - Useful cause of this that the other 1' },
  { value: 'b', shortLabel: 'B', longLabel: 'B - Useful cause of this that the other 2' },
  { value: 'c', shortLabel: 'C', longLabel: 'C - Useful cause of this that the other 3' },
];

步骤2：实现组件逻辑 #

用状态管理选中值，渲染自定义显示区域和透明的原生select：

import { useState } from 'react';

function DescriptiveSelect() {
  const [selectedValue, setSelectedValue] = useState('a');
  // 获取当前选中的选项数据
  const currentOption = options.find(opt => opt.value === selectedValue);

  return (
    <div className="descriptive-select-wrapper">
      {/* 自定义选中后显示的短文本 */}
      <div className="selected-label">{currentOption.shortLabel}</div>
      {/* 原生select，透明覆盖在自定义区域上，负责处理下拉交互 */}
      <select
        value={selectedValue}
        onChange={(e) => setSelectedValue(e.target.value)}
        className="overlay-select"
      >
        {options.map(opt => (
          <option key={opt.value} value={opt.value}>
            {opt.longLabel}
          </option>
        ))}
      </select>
    </div>
  );
}

步骤3：添加CSS样式 #

让select完全覆盖自定义显示区域，透明化，这样点击自定义区域就会触发原生下拉：

.descriptive-select-wrapper {
  position: relative;
  width: fit-content;
  /* 可以根据需求调整宽度 */
}

.selected-label {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  min-width: 100px;
}

.overlay-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* 确保select在最上层接收点击 */
  z-index: 1;
}

为什么这个方案更好？ #

• 保留原生select的所有原生交互：比如键盘上下键选择、移动端的原生下拉样式、表单提交时的value正常传递
• 避免了隐藏option带来的状态同步问题，不会出现选项列表冗余、选中状态混乱的情况
• 代码逻辑清晰，维护成本低

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