如何固定HTML Select的显示标签，始终显示指定文本而非选中值

我有一个用于**Radius（半径）**的Select控件，包含50km、100km和500km等选项。需求是：用户选择任意选项后下拉菜单关闭，但Select控件始终显示“Radius”而非选中的具体数值，同时保留原有的交互逻辑（比如选中值仍能正常触发onChange并更新状态）。

原代码如下：

<select
  onChange={e => valueSetterFunction(e.target.value)}
  value={value}
>
 {[
   { label: "50km", value: 50 },
   { label: "100km", value: 100 },
   { label: "500km", value: 500 },
  ].map(ele =>
            <option
              key={ele.label}
              value={ele.value}
            >
              {ele.label}
            </option>)
}
</select>

方法一：添加隐藏默认选项（简单高效） #

直接在选项列表最前面加一个特殊选项，把它设为默认显示但不让用户选中，就能实现需求：

<select
  onChange={e => valueSetterFunction(e.target.value)}
  value={value || ""} // 初始或已有选中值时，依然触发正常逻辑
>
  {/* 这个选项是默认显示的"Radius"，但用户选不到 */}
  <option value="" disabled style={{ display: 'none' }}>Radius</option>
  {[
    { label: "50km", value: 50 },
    { label: "100km", value: 100 },
    { label: "500km", value: 500 },
  ].map(ele => (
    <option key={ele.label} value={ele.value}>
      {ele.label}
    </option>
  ))}
</select>

• 新增的option通过disabled和display: none隐藏，用户没法选它，但它会作为Select的默认显示文本；
• value={value || ""}保证不管有没有选中值，控件都始终显示“Radius”，同时原有的onChange逻辑完全不受影响。

方法二：CSS自定义外观（适合需要改样式的场景） #

如果想更灵活控制显示样式，可以用容器包裹Select，把固定标签叠在上面，隐藏原生Select的选中文本：

<div style={{ position: 'relative', display: 'inline-block' }}>
  {/* 固定显示的"Radius"标签 */}
  <span style={{ 
    position: 'absolute', 
    left: 8, 
    top: '50%', 
    transform: 'translateY(-50%)', 
    pointerEvents: 'none', // 不抢Select的点击事件
    color: '#333'
  }}>Radius</span>
  {/* 原生Select，调整样式让标签能显示出来 */}
  <select
    onChange={e => valueSetterFunction(e.target.value)}
    value={value}
    style={{ 
      paddingLeft: '60px', // 给标签留位置
      color: 'transparent', // 隐藏原生选中值
      backgroundColor: '#fff',
      border: '1px solid #ccc',
      padding: '8px 12px',
      borderRadius: '4px'
    }}
  >
    {[
      { label: "50km", value: 50 },
      { label: "100km", value: 100 },
      { label: "500km", value: 500 },
    ].map(ele => (
      <option key={ele.label} value={ele.value}>
        {ele.label}
      </option>
    ))}
  </select>
</div>

• 外层容器用相对定位，span标签作为固定文本，pointerEvents: none确保点击时还是能触发Select的下拉；
• 原生Select把文本设为透明，调整内边距让固定标签显示在正确位置，下拉菜单的选项依然正常显示，选中逻辑也没问题。

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