如何在选中数组中AGE为空的选项时显示错误提示

问题场景 #

给定数据对象：

const dataObj = {
  0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' },  
  1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' },  
  2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' }  
}

对应的AngularJS下拉框代码：

<option ng-repeat='data in dataObj' value="data.NAME"> {{data.PET}} </option>

需求：选中索引为2的选项（对应NAME: 'C'，AGE为空）并点击保存时，显示「年龄为空」的错误提示。当前仅能通过:selected的val()获取NAME，text()获取PET，需实现该提示功能。

可行解决方案 #

1. 用AngularJS双向绑定直接获取完整数据（推荐） #

既然用了AngularJS，别绕DOM操作，直接绑定选中对象：

• 修改<select>和<option>，给<select>加ng-model，<option>用ng-value绑定整个数据项：

<select ng-model="selectedData">
  <option ng-repeat='data in dataObj' ng-value="data" value="{{data.NAME}}"> {{data.PET}} </option>
</select>

• 保存按钮的事件里直接判断AGE：

$scope.handleSave = function() {
  if ($scope.selectedData && !$scope.selectedData.AGE) {
    alert('年龄为空');
    // 也可以用Angular专用的弹窗组件替代alert
  } else {
    // 执行正常保存逻辑
  }
};

这种方式完全贴合Angular的设计，不需要手动操作DOM取数据。

2. 通过NAME匹配原数据找AGE #

如果必须依赖DOM的val()拿NAME，就遍历原数据匹配：

$('.save-btn').click(function() {
  const selectedName = $('select option:selected').val();
  // 遍历数据对象找到对应项
  let targetItem = null;
  for (const key in dataObj) {
    if (dataObj[key].NAME === selectedName) {
      targetItem = dataObj[key];
      break;
    }
  }
  if (targetItem && !targetItem.AGE) {
    alert('年龄为空');
  } else {
    // 保存逻辑
  }
});

如果把原数据改成数组（更规范），可以用find简化：

const dataArray = Object.values(dataObj);
const selectedName = $('select option:selected').val();
const targetItem = dataArray.find(item => item.NAME === selectedName);
if (targetItem && !targetItem.AGE) {
  alert('年龄为空');
}

3. 给option加自定义属性存AGE #

生成<option>时把AGE存到自定义属性里，直接从DOM读取：

<option ng-repeat='data in dataObj' value="{{data.NAME}}" data-age="{{data.AGE}}"> {{data.PET}} </option>

保存时直接取属性值判断：

$('.save-btn').click(function() {
  const selectedAge = $('select option:selected').data('age');
  if (!selectedAge) {
    alert('年龄为空');
  } else {
    // 保存逻辑
  }
});

这种方式不需要碰原数据，适合简单场景。

内容的提问来源于stack exchange，提问作者Krima Trivedi