如何为HTML select选项添加标题分组？

你当前用禁用的<option>做分组标题的方式不是HTML标准实现，想要达到目标分组样式，应该用HTML原生的<optgroup>标签——它专门用来对<select>的选项进行分组，浏览器会自动渲染出规范的分组标题样式。

另外你代码里还有个小错误：<section>标签没有for属性，应该用<label>来关联表单元素，同时你还写错了标签闭合（多了个</label>）。

修正后的完整代码如下：

<label for="Pick up">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
  <optgroup label="Hogwarts">
    <option value="Dining Hall">Dining Hall</option>
    <option value="Chamber of Secrets">Chamber of Secrets</option>
  </optgroup>
  <optgroup label="Other">
    <option value="Forbidden Forest">Forbidden Forest</option>
    <option value="Hagrid's Shack">Hagrid's Shack</option>
  </optgroup>
</select>

简单说明：

• <optgroup>的label属性就是分组的标题文本，比如这里的"Hogwarts"和"Other"
• 每个分组下的<option>都放在对应的<optgroup>标签内部
• 这种标准实现兼容性更好，样式也符合浏览器默认的分组展示效果

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