JavaScript 获取 select 选项的值几种方式总结

一、最常用：获取选中的 value ✅

HTML

<select id="mySelect">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">橘子</option>
</select>

JavaScript

const select = document.getElementById('mySelect');
const value = select.value;

console.log(value); // "1" / "2" / "3"

📌 90% 的场景用这一种就够了

二、获取选中的文本内容（不是 value）

const select = document.getElementById('mySelect');
const text = select.options[select.selectedIndex].text;

console.log(text); // "苹果"

或者更现代一点：

const text = select.selectedOptions[0].text;

三、获取选中项的 index（第几个）

const index = select.selectedIndex;
console.log(index); // 0、1、2...

四、监听 select 变化（用户切换时触发）

原生 JS（推荐）

select.addEventListener('change', function () {
  console.log(this.value);
});

jQuery（如果你在用）

$('#mySelect').change(function () {
  console.log($(this).val());
});

五、select 多选（multiple）

HTML

<select id="mySelect" multiple>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

JS 获取所有选中项

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

const values = Array.from(select.selectedOptions).map(opt => opt.value);
console.log(values); // ["a", "c"]

六、常见坑提醒 

1️⃣ 没写 value 会怎样？

<option>苹果</option>

select.value // "苹果"

👉 浏览器会自动把文本当作 value

2️⃣ 动态生成 select 后取不到值？

要确保：

• DOM 已加载完成

• 或代码在 select 后执行

document.addEventListener('DOMContentLoaded', () => {
  // 安全获取
});

七、一句话总结（直接记这个）

value 用 select.value
文本用 selectedOptions[0].text
变化用 change 事件