本文详解如何通过 jQuery 或原生 JavaScript 正确获取带有 label[for] 关联的 元素的当前选中值，重点解决因选择器错误（如误用 name 而非 id）导致返回 undefined 的常见问题。

本文详解如何通过 jquery 或原生 javascript 正确获取带有 `label[for]` 关联的 `` 元素的当前选中值，重点解决因选择器错误（如误用 `name` 而非 `id`）导致返回 `undefined` 的常见问题。

在 HTML 表单中，下拉列表（）是常用的数据输入控件。但许多开发者在尝试用 JavaScript 读取其选中值时遇到 undefined，根本原因往往是选择器与 DOM 元素实际属性不匹配。

你原始代码中使用了 $('#item').val()，但 元素仅有 name="item"，而 jQuery 的 # 选择器匹配的是 id 属性，不是 name。由于该元素缺少 id，$('#item') 返回空集合，.val() 自然为 undefined。

✅ 正确做法是：为 显式添加 id 属性，并确保它与 的值一致（这是语义化 HTML 和可访问性的最佳实践）。例如：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<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>

此时即可安全使用：

// ✅ 正确：通过 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 操作。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南