如何在HTML的select元素旁添加静态文本‘Start:’

你需要把静态文本“Start:”放在<select>元素的外部，绝对不要放到<select>内部的<option>标签里，这样下拉列表只会显示年份选项，外部的文本作为提示保留。

两种实现方式 #

1. 直接前置文本（简单快捷） #

Start:
<select class="select" id="startYear" onChange={(event) => setStartYear(event.target.value)}>
  <option value=2017 selected={2017 == startYear}>2017</option>
  <option value=2018 selected={2018 == startYear}>2018</option>
  {/* 更多年份选项 */}
</select>

2. 使用<label>标签（语义化推荐） #

如果需要让文本和下拉框形成关联（比如点击文本可聚焦下拉框），可以用for属性绑定select的id：

<label for="startYear">Start:</label>
<select class="select" id="startYear" onChange={(event) => setStartYear(event.target.value)}>
  <option value=2017 selected={2017 == startYear}>2017</option>
  <option value=2018 selected={2018 == startYear}>2018</option>
  {/* 更多年份选项 */}
</select>

两种方式都能实现“仅下拉列表显示年份，外部保留‘Start:’提示”的需求，根据你的布局和语义化需求选择即可。

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