HTML Academy · 课时

Select 与 option 下拉菜单

Q: 「Select 与 option 下拉菜单」这节课中我会学到什么？

使用 select 和 option 创建下拉选择菜单 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 select 和 option 创建下拉选择菜单

Select 与 option 下拉菜单 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

select 元素

<select> 元素会创建下拉菜单：

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

option 的 value 与文本

每个 <option> 都有一个 value（发送到服务器的值）和显示文本：

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

selected 属性

使用 selected 属性预先选中某个选项：

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

使用 optgroup 对选项分类

使用 <optgroup> 将相关选项分组：

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

multiple 属性

使用 multiple 属性允许选择多个选项：

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

size 属性

size 属性控制可见选项的数量：

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

禁用选项和分组

可以禁用单个选项或整个分组：

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

设置 select 的样式

原生 <select> 的样式自定义能力有限 — 以下是可行的做法：

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

自定义下拉菜单与原生 select

考虑使用自定义下拉菜单组件时，需要权衡以下因素：

原生 select — 默认具备可访问性、适合移动设备，并且无需 JavaScript 即可工作
自定义下拉菜单 — 可以完全控制样式，但需要完整实现 ARIA 和键盘操作

在大多数使用场景中，优先使用原生 <select>。

在 JavaScript 中读取选中值

使用 JavaScript 获取或设置选中值：

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

占位选项模式

创建一个不可选的占位选项：

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

快速检查

哪个元素可以在 select 下拉菜单中将相关选项分组？

回顾：select 和 option

下拉菜单要点：

<select> + <option> — 下拉菜单
option 上的 value — 提交到服务器的值
selected — 预先选中某个选项
<optgroup label> — 将相关选项分组
multiple — 允许多选
size — 不展开下拉菜单时显示 N 个选项

常见问题解答

「Select 与 option 下拉菜单」课时是免费的吗？

是的 — 「Select 与 option 下拉菜单」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「Select 与 option 下拉菜单」这节课中我会学到什么？

使用 select 和 option 创建下拉选择菜单你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Select 与 option 下拉菜单」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy