如何在下拉菜单中显示选中值“please pick and select”？原代码失效

你的代码无法正常运行的核心问题是错误使用了selected属性，并且缺少专门的默认提示选项。以下是修正方案：

核心修正点 #

• 单独添加一个默认提示的<option>，设置disabled避免用户选中，同时标记为默认选中项
• selected是布尔属性，不能直接赋值为提示文本，它仅用于标记选项是否处于选中状态

修正后的完整代码 #

<div className="col-md-6">
  <select
    className="form-select"
    aria-label="Default select example"
    {/* 若使用受控组件，可绑定state值：value={this.state.selectedOptionId} */}
  >
    {/* 默认提示选项 */}
    <option value="" selected disabled>please pick and select</option>
    {/* 遍历生成业务数据选项 */}
    {this.state.values.map((obj) => (
      <option key={obj.id} value={obj.id}> 
        {obj.name}
      </option>
    ))}
  </select>
</div>

补充说明 #

• 如果是受控组件，需要在组件state中维护选中值（比如selectedOptionId），初始值设为空字符串，即可自动匹配默认提示选项
• 若仅需静态默认提示，直接添加上述disabled的提示选项并设置selected即可，无需额外状态控制

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