如何从HTML下拉列表获取选中值到JavaScript？解决返回undefined问题

问题原因分析 #

• jQuery选择器匹配错误：你用$('#item')是通过id定位元素，但你的<select>标签仅设置了name="item"，没有id="item"属性，导致选择器找不到目标元素，返回undefined。
• 不符合AngularJS数据驱动逻辑：AngularJS是基于双向数据绑定的框架，直接用jQuery操作DOM获取值并非最佳实践，容易和框架的绑定机制产生冲突。

解决方案 #

方案1：修正jQuery选择器（临时应急方案，不推荐） #

两种方式可以修复选择器问题：

• 给<select>添加id属性：

<select id="item" 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>

之后用var repId = $('#item').val();即可正常获取值。

• 直接通过name属性选择元素：

var repId = $('[name="item"]').val();

方案2：使用AngularJS ng-model获取（推荐） #

AngularJS的双向绑定已经将选中值同步到$scope.idDropdown，直接在控制器中读取该变量即可：

// 在你的Angular控制器代码中
var repId = $scope.idDropdown;

另外注意：你的第一个<option>的value="{{item}}"存在问题，此时item不在ng-repeat的作用域内，会被渲染成value="undefined"，建议改成value=""，让默认选中时idDropdown为空值，逻辑更合理。

额外优化：用ng-options替代ng-repeat（更规范） #

AngularJS官方推荐用ng-options生成下拉选项，相比ng-repeat更高效，也更符合框架规范：

<select name="item" class="form-control" style="font-weight: bold;" 
        ng-model="idDropdown" 
        ng-options="item as item for item in columnData">
  <option value="">Select REP ID</option>
</select>

内容的提问来源于stack exchange，提问作者Sathish Kumar