Angular5中如何通过键值对获取下拉选项的ID与值？

嘿，这个问题我之前也碰到过！你用$event.target.id拿不到选中选项的ID，是因为你获取的是<select>元素本身的ID（如果没给select设id的话自然是空），而不是选中的<option>标签的ID。下面给你几个简便的实现方式：

方法一：通过模板变量直接获取选中的Option元素 #

这种方法最直接，不用额外处理数据绑定，适合简单场景：

模板代码： #

<select #mySelect (change)="handleSelectChange(mySelect)">
  <option value="user1" id="id_user_1">用户A</option>
  <option value="user2" id="id_user_2">用户B</option>
  <option value="user3" id="id_user_3">用户C</option>
</select>

组件代码： #

handleSelectChange(selectEl: HTMLSelectElement) {
  const selectedOption = selectEl.selectedOptions[0];
  if (selectedOption) {
    const optionValue = selectedOption.value;
    const optionId = selectedOption.id;
    console.log(`选中值：${optionValue}，对应ID：${optionId}`);
    // 这里可以做你的业务逻辑
  }
}

方法二：用NgModel绑定选项对象（推荐动态场景） #

如果你的选项是从后端接口获取的动态数据，这种方法更省心，直接把整个选项对象绑定到select上：

组件中定义选项数组： #

userOptions = [
  { id: 'id_user_1', value: 'user1', name: '用户A' },
  { id: 'id_user_2', value: 'user2', name: '用户B' },
  { id: 'id_user_3', value: 'user3', name: '用户C' }
];
selectedUser: any; // 用来绑定选中的对象

模板代码： #

<select [(ngModel)]="selectedUser" (change)="onUserSelected()">
  <option *ngFor="let user of userOptions" [ngValue]="user" [id]="user.id">
    {{user.name}}
  </option>
</select>

组件中的处理方法： #

onUserSelected() {
  if (this.selectedUser) {
    console.log(`选中值：${this.selectedUser.value}，对应ID：${this.selectedUser.id}`);
    // 直接使用this.selectedUser里的所有属性
  }
}

这种方法的好处是，你不需要手动去查找选中的选项，selectedUser直接就是你需要的完整对象，后续业务逻辑处理起来更方便。

补充说明 #

如果你还是想用$event来处理，也可以这么写：

<select (change)="handleEventChange($event)">
  <!-- 选项同上 -->
</select>

handleEventChange(event: Event) {
  const selectEl = event.target as HTMLSelectElement;
  const selectedOption = selectEl.selectedOptions[0];
  // 后续操作和方法一一样
}

本质和方法一是一样的，只是通过$event来获取select元素而已。

内容的提问来源于stack exchange，提问作者nick gowdy