60. 下拉选择 select option optgroup

本节目标：学会用下拉菜单让用户从预定义选项中选择，减少输入错误。

当选项超过 5 个，下拉列表比一堆 radio 更省空间。

基础下拉框

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

<select> 是下拉框容器
<option> 是每一个选项
value 是提交给服务器的值
标签文字是用户看到的

默认选中

<option value="shanghai" selected>上海</option>

selected 属性让这个选项默认被选中。不加的话，默认选中第一个。

想做一个”请选择…”的提示项，把它设为默认并加

：

<option value="" disabled selected>请选择城市</option>

multiple：多选

<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>

按住 Ctrl 可以多选。size 属性控制可见行数，不写的话默认是一个小下拉框。

手机上 multiple 体验不好。移动端多选建议用 checkbox 替代。

optgroup：选项分组

选项多的时候，用 <optgroup> 分组更清晰。

<select name="car">
  <optgroup label="德国品牌">
    <option value="benz">奔驰</option>
    <option value="bmw">宝马</option>
    <option value="audi">奥迪</option>
  </optgroup>
  <optgroup label="日本品牌">
    <option value="toyota">丰田</option>
    <option value="honda">本田</option>
    <option value="nissan">日产</option>
  </optgroup>
</select>

label 属性是分组标题。分组标题不可选，纯展示用。

动态设置选中

用 JavaScript 改变选中项：

document.querySelector('select[name="city"]').value = 'shanghai';

设置 value 就能选中对应的 option。

完整示例

一个”个人信息”表单中的下拉选择：

<form>
  <p>
    <label>所在城市：<br>
      <select name="city" required>
        <option value="" disabled selected>请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
      </select>
    </label>
  </p>

  <p>
    <label>擅长的编程语言（可多选）：<br>
      <select name="languages" multiple size="5">
        <optgroup label="前端">
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="javascript">JavaScript</option>
        </optgroup>
        <optgroup label="后端">
          <option value="python">Python</option>
          <option value="java">Java</option>
          <option value="go">Go</option>
        </optgroup>
      </select>
    </label>
  </p>

  <p><button type="submit">提交</button></p>
</form>

下拉框 vs 单选按钮

场景	推荐用
选项 ≤ 5 个	radio 单选按钮
选项 > 5 个	select 下拉框
需要分组显示	select + optgroup
需要多选	checkbox 或 select multiple

选对控件，用户填表单更顺手。