---

在Web开发中，获取<select>元素的选中值是表单处理的常见需求。

1. 直接获取value属性

const select = document.getElementById('mySelect');
console.log('选中值:', select.value);  // 返回选中项的value或text

所有浏览器都支持直接读取<select>元素的value属性：

• 若<option>设置了value属性，返回value值
• 若未设置value属性，返回选项的文本内容
• 多选模式则返回第一个选中项

案例

<select id="fruit">
  <option>苹果</option>          <!-- 未设置value -->
  <option value="banana">香蕉</option>
</select>

console.log(select.value);       // "苹果"（text内容）
console.log(select.value);       // "banana"（value内容）

2. 通过selectedIndex遍历选项

const select = document.getElementById('mySelect');
const index = select.selectedIndex;     // 获取选中项索引
const value = select.options[index].value;  // 通过options集合获取值

通过selectedIndex获取当前选中项的索引（从0开始）, 再通过options集合访问具体选项对象, 然后读取选项的value或text属性

案例

<select id="fruit">
  <option>苹果</option>          <!-- 未设置value -->
  <option value="banana">香蕉</option>
</select>

console.log(select.options[0].value); // ""（空value） 
console.log(select.options[1].value); // "banana"