如何在 Aurelia 的组合框中获取所选项目的 ID？

Question

我能够将值填充到下拉列表中，如下所示

app.js

export class App {

  constructor() {

    this.countryCollection = [
  {
    "CountryID": "1",
    "CountryName": "Japan"
  },
  {
    "CountryID": "2",
    "CountryName": "USA"
  },
  {
    "CountryID": "3",
    "CountryName": "Canada"
  },
  {
    "CountryID": "4",
    "CountryName": "Sweden"
  }
];

  }  
}

app.html

<template>
<h2>
  <select>
        <option value="">-Choose Country-</option>
        <option value="${country.CountryID}"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>
</template>

但是要在下拉列表的 Change 事件中获取选定的国家/地区 ID？

Answer 1

将 selectedCountryId 添加到 app.js，然后将 select 更改为

<select value.bind="selectedCountryId">
        <option model.bind="null">-Choose Country-</option>
        <option model.bind="country.CountryID"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>

这会将已 selected 的国家/地区 ID 绑定到 .js 文件的 selectedCountryId 属性。这是直接从他们的文档中提取的 here.

如何在 Aurelia 的组合框中获取所选项目的 ID？

How to get the ID of a selected item in a combobox in Aurelia?

aurelia

dropdown

app.js

app.html