handlebars.js：在选择更改时动态更改内容

Question

我正在尝试根据选择字段的更改来更改内容。

“每月”将是页面加载时的默认选项。如果用户将选择值更改为“每年”，我想将regularPrice替换为每年一次（基于所选的用户数量）。

是否可以通过某种方式动态更改pricingOption？例如，从{{pricingOptions.monthly.regularPrice}}到{{pricingOptions.yearly.regularPrice}}，并根据所选的用户数量显示正确的价格？

handlebars.js是否可能？

谢谢！

<select>
  <option>Pricing</option>
  <option value="monthly">Monthly</option>
  <option value="yearly">Yearly</option>
</select>

<select>
  <option>Number of users</option>
  {{#each pricingOptions.monthly}}
    <option value="{{id}}">{{optionLabel}}</option>
  {{/each}}
</select>

<span>{{pricingOptions.monthly.regularPrice}}</span>

var productList = {
  pricingOptions: {
    monthly: [
      {
        id: 1,
        optionLabel: "1 user",
        regularPrice: 10.00
      },
      {
        id: 2,
        optionLabel: "2 users",
        regularPrice: 20.00
      }
    ],
    yearly: [
      {
        id: 1,
        optionLabel: "1 user",
        regularPrice: 100.00
      },
      {
        id: 2,
        optionLabel: "2 users",
        regularPrice: 200.00
      }
    ]
  }
}