本文详解如何通过 jQuery 或原生 JavaScript 正确获取带有 label[for] 关联的 <select> 元素的当前选中值，重点解决因选择器错误（如误用 name 而非 id）导致返回 undefined 的常见问题。
本文详解如何通过 jquery 或原生 javascript 正确获取带有 `label[for]` 关联的 `
在 HTML 表单中，下拉列表（<select>）是常用的数据输入控件。但许多开发者在尝试用 JavaScript 读取其选中值时遇到 undefined，根本原因往往是选择器与 DOM 元素实际属性不匹配。
你原始代码中使用了 $('#item').val()，但 <select> 元素仅有 name="item"，而 jQuery 的 # 选择器匹配的是 id 属性，不是 name。由于该元素缺少 id，$('#item') 返回空集合，.val() 自然为 undefined。
✅ 正确做法是：为 <select> 显式添加 id 属性，并确保它与 <label for="..."> 的值一致（这是语义化 HTML 和可访问性的最佳实践）。例如：
<label for="repId">REP ID</label> <select id="repId" name="item" class="form-control" ng-model="idDropdown"> <option value="">Select REP ID</option> <option value="REP001">REP001</option> <option value="REP002">REP002</option> <!-- 动态选项由 AngularJS 渲染 --> </select>
此时即可安全使用：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
// ✅ 正确：通过 id 获取（推荐）
const repId = $('#repId').val(); // jQuery
// 或原生 JavaScript（无需 jQuery）
const repIdNative = document.getElementById('repId').value;⚠️ 注意事项：
- 若需监听用户选择变化，应绑定 change 事件而非在初始化时一次性读取；
- 在 AngularJS 环境中（如你的 ng-model="idDropdown"），优先通过 $scope.idDropdown 获取值，避免绕过数据绑定直接操作 DOM；
- ng-repeat 渲染的选项需确保 columnData 已就绪，且 {{item}} 模板语法在 Angular 上下文中生效——纯 jQuery 无法解析 Angular 模板，因此 $('#repId').val() 应在 Angular 渲染完成后再调用（如放在 $scope.$watch('idDropdown', ...) 中）。
? 小结：
name 用于表单提交，id 用于 DOM 定位和标签关联；务必为交互式控件设置 id，并使用 #id 选择器；在框架项目中，优先遵循框架的数据流机制，而非强行 DOM 操作。
