本文详解如何通过 jQuery 或原生 JavaScript 获取 HTML <select> 元素的当前选中值，重点解决因选择器错误（如混淆 name 与 id）导致返回 undefined 的常见问题，并提供可运行示例与最佳实践。
本文详解如何通过 jquery 或原生 javascript 获取 html `
在 Web 开发中，经常需要读取用户从下拉列表（<select>）中选择的值。但初学者常因 DOM 选择器使用不当而得到 undefined ——例如，您使用了 $('#item').val()，却未给 <select> 设置 id="item"，而是仅设置了 name="item"。而 jQuery 的 # 选择器匹配的是 id 属性，不是 name。
✅ 正确做法是：为 <select> 显式添加 id 属性（需与 <label for="..."> 中的 for 值一致），再通过该 id 获取值。如下修复后的 HTML 结构：
<div class="form-group">
<label for="repId">REP ID</label>
<select id="repId" name="item" class="form-control" style="font-weight: bold;" ng-model="idDropdown">
<option value="">-- Select REP ID --</option>
<option ng-repeat="item in columnData" value="{{item}}">{{item}}</option>
</select>
</div>此时，即可安全使用 jQuery 获取选中值：
// ✅ 正确：通过 id 选择器获取
const repId = $('#repId').val(); // 返回当前选中 option 的 value 值（字符串）
// 可绑定 change 事件实时响应
$('#repId').on('change', function() {
console.log('Selected REP ID:', $(this).val());
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若未设置 id，或 id 与选择器不匹配（如写成 $('#item') 但实际 id="repId"），val() 将返回 undefined；
- ng-model 是 AngularJS 的双向绑定指令，不影响原生 DOM 操作；jQuery 读取的是当前 DOM 中 <select> 的 value 属性（即已选中的 option 的 value）；
- 如需兼容无 jQuery 的环境，推荐原生写法：
const selectEl = document.getElementById('repId'); const repId = selectEl.value; // 等价于 $('#repId').val() selectEl.addEventListener('change', () => { console.log('Selected:', selectEl.value); });
? 补充技巧：若需获取选中文本（而非 value），可用：
const selectedText = $('#repId option:selected').text();总之，确保 <select> 具有唯一且正确的 id，并用 #id 选择器访问，是可靠读取下拉值的前提。避免依赖 name 属性进行 jQuery 选取，这是导致 undefined 的最常见根源。
