当前位置：首页 > 文章列表 > 文章 > 前端 > JS获取下拉框选中值的方法如下：通过 value 属性获取选中值（推荐）：var select = document.getElementById("mySelect"); var selectedValue = select.value; console.log(selectedValue);通过 options 集合获取选中项的 value：var select = document.getE

JS获取下拉框选中值的方法如下：通过 value 属性获取选中值（推荐）：var select = document.getElementById("mySelect"); var selectedValue = select.value; console.log(selectedValue);通过 options 集合获取选中项的 value：var select = document.getE

2026-04-16 13:59:51 0浏览收藏

本文全面解析了JavaScript中获取下拉框（select）选中值的多种方法与关键细节，重点推荐直接读取`select.value`这一简洁高效的方式，并深入说明其在单选与多选场景下的不同行为：单选时`value`属性原生返回当前选中项的值（若option未设置value则回退为文本内容），而多选时必须使用`selectedOptions`集合配合数组转换才能准确获取全部选中值；同时强调务必在DOM加载完成后操作、使用`change`事件监听值变化、避免误用`selectedIndex`或`input`事件，并提醒注意空值、禁用选项、默认选中逻辑等易踩坑细节——掌握这些要点，能让你轻松写出健壮、兼容、可维护的下拉框交互代码。

HTML下拉框如何取值_JS取HTML下拉框选中值用value属性【取值】

直接读 `select` 元素的 `value` 属性最简单

不需要遍历 option，也不用判断 selected，现代浏览器对 <select> 元素原生支持 value 属性自动返回当前选中项的 value 值（或文本内容，当选项没设 value 时）。

前提是 DOM 已加载完成，且元素有明确的 id 或能被正确选取：

const selectEl = document.getElementById('mySelect');
console.log(selectEl.value); // 直接输出选中项的 value 字符串

如果所有都设置了 value，selectEl.value 就是那个值
如果某个没写 value（例如），它的 value 默认为文本内容，此时 selectEl.value 会是 "北京"
若下拉框是多选（multiple），value 只返回第一个选中项的值，这时必须改用 selectedOptions

多选下拉框必须用 `selectedOptions` 遍历

select.multiple === true 时，select.value 不可靠，它只反映首个选中项，且无法得知全部选择。真正安全的方式是读取 selectedOptions 类数组对象：

const multiSelect = document.getElementById('myMultiSelect');
const selectedValues = Array.from(multiSelect.selectedOptions).map(opt => opt.value);
console.log(selectedValues); // ['sh', 'gz', 'sz']

selectedOptions 是实时的、只读的 HTMLCollection，包含所有当前被选中的
务必用 Array.from() 或展开语法 [...multiSelect.selectedOptions] 转成数组，才能调用 map、filter 等方法
不要用 options 配合 selectedIndex —— 多选时 selectedIndex 只返回第一个选中索引，其余丢失

监听变化要用 `change` 事件，不是 `click` 或 `input`

下拉框值改变后，触发的是 change 事件，不是 click（点击不等于选中改变），也不是 input（input 对 select 无效）：

document.getElementById('mySelect').addEventListener('change', function() {
  console.log('新选中值：', this.value);
});

change 在用户操作完成、焦点离开或选项确定后才触发，语义准确
如果想“实时响应”（比如搜索联想），得配合其他交互逻辑，原生 select 不支持输入过程中触发
动态插入 option 后，无需重新绑定事件——事件委托或直接绑定在 select 上都可生效

注意空值、禁用项和默认选中逻辑

select.value 在无任何选项被选中时返回空字符串 ""，但实际中往往有隐含默认行为：

如果 HTML 中写了 <select></select>，则初始 value 是空字符串（因该 option 无 value 属性）
禁用的不会被计入选中状态，select.value 会跳过它，取下一个有效选中项；若全禁用或无 selected，结果为 ""
JavaScript 设置选中时，推荐用 select.value = 'xxx'（比操作 option.selected = true 更简洁），浏览器会自动匹配并滚动/高亮对应项

真正容易出问题的，是假设“有默认选项就一定有值”，而忽略空 value 和 disabled selected 的组合效果。动手前先检查 HTML 源码里每个 option 的 value 和 selected 状态。

今天关于《JS获取下拉框选中值的方法如下：通过 value 属性获取选中值（推荐）：var select = document.getElementById("mySelect"); var selectedValue = select.value; console.log(selectedValue);通过 options 集合获取选中项的 value：var select = document.getElementById("mySelect"); var selectedIndex = select.selectedIndex; var selectedValue = select.options[selectedIndex].value; console.log(selectedValue);获取选中项的文本内容（非 value）：var select = document.getElementById("mySelect"); var selectedText = select.options[select.selectedIndex].text; console.log(selectedText);注意：如果下拉框的 option 没有设置 value，则默认使用 text 作为值。使用 value 属性是最简单、最常用的方式。示例 HTML：<select id="mySelect"></select>输出结果：2以上方法适用于大多数场景，确保元素已加载后再执行脚本。》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！