HTML select 标签：下拉菜单、多选与提交值

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

HTML <select> 是用于从 option 定义的选项中选择值的表单控件。默认情况下允许单选；multiple 启用多重选择。select 元素的 name 确定提交的字段，而选中的 option 元素的 value 提供其值。

区分字段名称、可见标签和提交值

将 label 元素的 for 与 select 元素的 id 匹配，以便将描述与控件关联。id 用于标识文档中的元素，而 name 成为提交的数据键。可见选项文本可以与 value 不同：选择 网页开发 可以提交 web。如果省略 value，则使用该选项的文本作为其值。

在普通的单选控制中，通常省略 selected 会使第一个可用选项成为初始选择。要要求明确选择，请给第一个选项一个空的 value 并添加 required，如下所示。当其值为空时，可见指令不满足必选项要求。

完整示例：必填和多选项

将代码保存为 select-demo.html 并在浏览器中打开。JavaScript 会阻止提交，并在页面上显示当前表单数据。此练习不会将数据发送到实际服务器或外部网站。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>检查 select 的值</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>检查已选值</h1>
  <form id="demo">
    <label for="topic">感兴趣的主题（必填）</label>
    <select id="topic" name="topic" required>
      <option value="" selected>请选择主题</option>
      <optgroup label="开发">
        <option value="web">网页开发</option>
        <option value="data">数据处理</option>
      </optgroup>
    </select>
    <label for="skills">学习的技术（可多选）</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">禁用的字段</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">无法修改</option>
    </select>
    <button type="submit">查看值</button>
    <button type="reset">重置</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

未选择主题时按 查看值。浏览器的必填字段验证会阻止提交。
选择 网页开发 并按 查看值。输出包含 topic 和 web，以及两个 skills 条目，分别为 html 和 css。禁用的 locked 字段被排除。
更改技能选择并再次检查。每个选中的选项都会生成另一个名为 skills 的条目。如果取消选择所有选项，可能不会有 skills 条目。
按 重置。主题返回到空指令选项，技能返回到 HTML 和 CSS，并且输出被清除。

multiple 和 size 是不同的属性

multiple 允许多个值，而 size 指定可见行数。增加 size 不会自动启用多重选择。键盘组合取决于操作系统。桌面控件可能支持在点击时使用 Ctrl 或 Command，或使用 Shift 进行范围选择；移动设备可能提供单独的选择屏幕。

在 JavaScript 中读取多项选择时，select.value 只给出第一个选中的值。可以遍历 selectedOptions 或在 FormData 实例（例如 new FormData(form).getAll('skills')）上调用 getAll('skills')，以获取每个值。在服务器端，请遵循框架的规则来解析具有相同名称的重复字段。

谨慎使用 disabled、required 和 selected

disabled 会阻止交互并将该字段排除在提交数据之外。select 没有 input 元素的 readonly 属性的原生等效，因此添加 readonly 并不能锁定它。在浏览器中禁用控件也不能替代服务器上的授权检查。

required、disabled、multiple 和 selected 是布尔属性。即使 selected="false" 也保留了该属性，因此该选项仍然可以被视为最初选中的状态。移除该属性或将其对应的 JavaScript 属性设置为 false 可以使其为 false。重置会恢复 HTML 中声明的初始选择；它并不一定会清除每一个选择。

autofocus 可以自动聚焦控件，但只应在必要时使用，同时考虑读者的位置和移动键盘的行为。原生控件和弹出窗口因浏览器和操作系统而异，因此保留 label 关联和标准键盘交互对普通表单是有用的。MDN 的 select 元素参考和 MDN 的 option 元素参考解释了详细规则。

HTML 参考手册