通过 JavaScript 向 `＜select＞` 动态添加选项：Modern JavaScript Tutorial 实战解析
2026/10/7 21:06:46
网站建设
项目流程
【免费下载链接】en.javascript.info Modern JavaScript Tutorial
项目地址： https://gitcode.com/gh_mirrors/en/en.javascript.info
点击查看 免费下载 # 通过 JavaScript 向 `` 动态添加选项：Modern JavaScript Tutorial 实战解析 本指南以 Modern JavaScript Tutorial 中「向 select 添加选项」一题及其官方解答为核心，完整讲解 <select> 元素的三组关键属性（options、value、selectedIndex）、new Option() 构造语法，以及读取选中项、追加选项、切换选中状态的完整实战流程。读完本文，你将掌握在不依赖任何框架的情况下，用原生 JavaScript 完成下拉框的动态增改与选中项读写，并能独立迁移到真实表单业务中。 一、题目与解答：向 <select> 添加一个选项 本节内容对应仓库中的题目文件 task.md 与官方解答 solution.md。 1.1 题目原貌 页面中已存在一个 <select>： <select id="genres"> <option value="rock">Rock</option> <option value="blues" selected>Blues</option> </select> 要求使用 JavaScript 完成三件事： 显示当前选中项的 value 与文本； 追加一个新选项 <option value="classic">Classic</option>； 让新选项成为选中项。 题目特别提示：如果实现正确，alert 弹出的结果应为 blues（即第一步展示的是 Blues 的 value，而不是最终选中 Classic 后的结果）。 1.2 官方解答逐步拆解 官方解答 solution.md 给出了完整代码： <select id="genres"> <option value="rock">Rock</option> <option value="blues" selected>Blues</option> </select> <script> // 1) let selectedOption = genres.options[genres.selectedIndex]; alert( selectedOption.value ); // 2) let newOption = new Option("Classic", "classic"); genres.append(newOption); // 3) newOption.selected = true; </script> 第 1 步：读取当前选中项 let selectedOption = genres.options[genres.selectedIndex]; alert( selectedOption.value ); genres.options 是 <select> 内所有 <option> 子元素组成的集合； genres.selectedIndex 是当前选中项的下标（从 0 开始）； 两者组合即可拿到被选中的 <option> 元素，再读取其 .value。 HTML 中 Blues 选项带有 selected 属性，因此 selectedIndex 为 1，selectedOption.value 输出 "blues"。这正是题目要求验证的输出结果。 第 2 步：追加新选项 let newOption = new Option("Classic", "classic"); genres.append(newOption); new Option("Classic", "classic") 使用构造语法创建选项，第一个参数是展示文本，第二个参数是 value； genres.append(newOption) 把该选项追加到 <select> 末尾，效果等价于向 DOM 中插入 <option value="classic">Classic</option>。 第 3 步：切换选中状态 newOption.selected = true; 直接对新选项的 selected 属性赋 true，浏览器会自动把之前选中的 Blues 取消，将 Classic 设为当前选中项。 二、<select> 的三组核心属性与三种设置选中项的方式 要彻底理解上面的解法，需要先掌握 <select> 的三大属性。本小节内容来自教程正文 article.md 的 select and option 一节。 一个 <select> 元素有三个重要属性： 属性含义 select.options所有 <option> 子元素组成的集合 select.value当前选中 <option> 的 value 值 select.selectedIndex当前选中 <option> 的下标（从 0 开始） 这三者对应了三种不同的选中项设置方式： 通过元素设置：在 select.options 中找到目标 <option>，把它的 option.selected 设为 true； 通过值设置：已知新选项的 value 时，直接把 select.value 赋为新值； 通过下标设置：已知新选项序号时，把 select.selectedIndex 设为该序号。 以下三种写法效果完全相同： <select id="select"> <option value="apple">Apple</option> <option value="pear">Pear</option> <option value="banana">Banana</option> </select> <script> // 三行代码做的是同一件事：选中 Banana select.options[2].selected = true; select.selectedIndex = 2; select.value = 'banana'; // 注意：option 下标从 0 开始，index 2 对应第 3 个选项 </script> 2.1 多选模式下的读取 与大多数控件不同，<select> 在带有 multiple 属性时允许同时选中多个选项。此时 select.value 只能返回第一个选中项，因此需要遍历 options 集合逐个判断： <select id="select" multiple> <option value="blues" selected>Blues</option> <option value="rock" selected>Rock</option> <option value="classic">Classic</option> </select> <script> // 收集多选中所有选中的值 let selected = Array.from(select.options) .filter(option => option.selected) .map(option => option.value); alert(selected); // blues,rock </script> Array.from(select.options) 把类数组的 options 集合转为真正的数组，才能使用 filter/map； option.selected 判断每个选项是否被选中； 结果 ["blues", "rock"] 即全部选中项的 value 列表。 多选模式下若要修改选中状态，同样推荐第 1 种方式：直接增删各 <option> 的 selected 属性。 三、new Option() 构造语法：一行代码创建选项 new Option() 是 HTML 规范中创建 <option> 的简短写法，同样见 article.md 的 new Option 一节。 option = new Option(text, value, defaultSelected, selected); 四个参数的含义如下： 参数类型含义 textstring选项展示给用户的文本 valuestring选项的 value 值 defaultSelectedboolean若为 true，会创建 selected HTML 属性（可通过 option.getAttribute('selected') 读取） selectedboolean若为 true，该选项即为当前选中项 defaultSelected 与 selected 的区别：defaultSelected 控制的是 HTML 属性（attribute），selected 控制的是选项的实际选中状态（property）。实践中通常把两者都设为 true 或 false；也可以全部省略，两者默认都是 false。 示例——创建一个未选中的选项： let option = new Option("Text", "value"); // 等价于 <option value="value">Text</option> 创建一个同时带 selected 属性且处于选中态的选项： let option = new Option("Text", "value", true, true); 虽然 new Option() 更简短，但它并非唯一选择，也可以用 document.createElement('option') 后逐个设置属性实现同样效果。 3.1 <option> 元素的常用属性 选项元素本身还暴露了三个常用属性（见 article.md）： option.selected：该选项是否被选中（布尔值）； option.index：该选项在所属 <select> 中的序号； option.text：选项的展示文本（用户可见的部分）。 四、表单导航基础：从 document.forms 到 element.form 题目中的代码直接通过 id 拿到 <select> 元素（genres），这是最直接的方式。但了解完整的表单导航体系有助于你在真实场景中灵活定位控件，相关内容同样收录于 article.md。 4.1 表单与元素的导航 document.forms 是文档中所有表单的具名集合，既可按名字访问，也可按下标访问： document.forms.my; // name="my" 的表单 document.forms[0]; // 文档中第一个表单 拿到表单后，通过 form.elements 这个具名集合访问内部控件，与 DOM 标签嵌套层级无关——无论控件嵌套多深，都能直接取到： <form name="my"> <input name="one" value="1"> <input name="two" value="2"> </form> <script> let form = document.forms.my; // <form name="my"> let elem = form.elements.one; // <input name="one"> alert(elem.value); // 1 </script> 当多个控件同名时（常见于单选框、复选框），form.elements[name] 返回一个集合： <form> <input type="radio" name="age" value="10"> <input type="radio" name="age" value="20"> </form> <script> let form = document.forms[0]; let ageElems = form.elements.age; alert(ageElems[0]); // [object HTMLInputElement] </script> 4.2 反向引用：element.form 从控件反向拿到所属表单： <form id="form"> <input type="text" name="login"> </form> <script> let login = form.login; // 表单 -> 控件 alert(login.form); // 控件 -> 表单（HTMLFormElement） </script> 于是表单与控件之间形成双向引用：form.elements / form[name] 从表单到控件，element.form 从控件回到表单。 4.3 补充细节 <fieldset> 可作为"子表单"：fieldset 同样拥有 elements 属性，可列出其内部控件；同一个控件既可通过 form.elements[name] 访问，也可通过 fieldset.elements[name] 访问（两者返回同一元素）。 简写 form[name] 的注意点：form.elements.login 可简写为 form.login，但若之后修改了控件的 name，form.elements 会立即反映新名字，而 form 对象会同时保留新旧两个名字的引用。实际开发中很少动态改名，影响有限。 input / textarea 的值：文本类控件用 input.value（字符串）读取，复选框、单选框用 input.checked（布尔值）判断是否选中。特别注意：<textarea> 虽然把内容放在标签内部，但应始终用 textarea.value 读取，不要使用 textarea.innerHTML——后者只会得到页面初始的 HTML，而非当前值。 五、解法背后的运行机制与适用边界 5.1 append 与 options.add 的关系 题目使用 genres.append(newOption) 完成插入，这是 DOM 原生的节点追加方法。除此之外，HTMLSelectElement 也提供了专门的 add() 方法（可在 select.options 集合中插入）。两者都能完成"把选项加进下拉框"的目标，append 更通用、add() 更贴近表单语义。无论用哪种方式插入，新选项都会立即出现在 options 集合中，可被后续的 selectedIndex / value 逻辑正常读取。 5.2 为什么 alert 输出的是 blues 题目刻意安排"先展示选中项，再添加并选中新选项"的执行顺序：第 1 步执行时 Classic 还不存在，Blues 仍是唯一选中项，因此 alert(selectedOption.value) 输出 blues。如果调换顺序——先插入并选中 Classic，再读取选中项——结果就会变成 classic。这一细节说明： 代码的执行顺序直接决定读取结果； selectedIndex / value / options 始终反映"当前时刻"的 DOM 状态； 在真实业务中，若需要"保存旧选中值"再"切换选项"，务必在状态变更前完成读取。 5.3 常见变体：用 document.createElement 实现 如果项目环境不支持 new Option()（极罕见），可完全用标准 DOM API 替代： let newOption = document.createElement('option'); newOption.textContent = 'Classic'; newOption.value = 'classic'; genres.append(newOption); newOption.selected = true; textContent 对应 new Option 的 text 参数，value 对应第二个参数。其余流程与官方解答完全一致。 六、小结 围绕"向 <select> 添加选项"这一题目，可以提炼出以下可复用要点： 读取选中项：select.options[select.selectedIndex] 组合取到选中 <option>，再读 .value / .text； 创建选项：new Option(text, value, defaultSelected, selected) 一行创建，四个参数含义清晰；也可用 document.createElement('option') 等价实现； 插入选项：select.append(newOption)（或 select.add()）将选项加入下拉框； 切换选中：直接设置 newOption.selected = true，浏览器自动取消原选中项； 三种选中设置方式：option.selected = true、select.value = ...、select.selectedIndex = ... 效果等价，按需选择； 多选场景：使用 multiple 属性时，遍历 options 配合 option.selected 收集全部选中值； 状态时序：读取选中项的操作要放在状态变更之前，才能拿到预期的旧值。 更多表单属性和方法可继续阅读仓库中的 Form properties and methods 正文，以及本仓库 README.md 中关于教程目录结构的说明（task.md 与 solution.md 成对出现的组织方式）。下一章节将讲解任何元素都可能触发、但主要在表单上处理的 focus 与 blur 事件，可关注 2-focus-blur 目录继续学习。 赞 分享 文档/教程前端 【免费下载链接】en.javascript.info Modern JavaScript Tutorial 项目地址： https://gitcode.com/gh_mirrors/en/en.javascript.info 点击查看 免费下载 相关推荐 WinSW XML配置文件核心篇：id、executable与env逐项拆解，小白也能秒懂的完整指南 WinSW XML配置文件核心篇：id、executable与env逐项拆解，小白也能秒懂的完整指南 一句话看懂 WinSW WinSW （Windows Se 文档/教程前端 JavaScript 事件处理实战：为消息列表添加关闭按钮（Modern JavaScript Tutorial） JavaScript 事件处理实战：为消息列表添加关闭按钮（Modern JavaScript Tutorial） 本文基于 Modern JavaScript 文档/教程前端 JavaScript 生成器（Generator）完全指南：yield、next 双向通信与迭代器实战（Modern JavaScript Tutorial） JavaScript 生成器（Generator）完全指南：yield、next 双向通信与迭代器实战（Modern JavaScript Tutorial） 文档/教程前端 上一篇： iProxy安全实践：如何保护你的iPhone代理服务器不被恶意利用 下一篇： 多模态AI的终极突破：ImageBind如何实现6种模态统一嵌入空间