Aurelia cascading selects example

welcome.html

<template>
  <section class="au-animate">

    <h2>Cascading Selects Example</h2>

    <form role="form" submit.delegate="submit()">

      <div class="form-group">
        <label for="levelOne">Level 1</label>
        <select id="levelOne" name="levelOne" value.bind="levelOne">
          <option value="">Select a level 1 item</option>
          <option value="${$index}" repeat.for="option of data">${option.name}</option>
        </select>
        Value: ${levelOne}
      </div>

      <div class="form-group">
        <label for="levelTwo">Level 2</label>
        <select id="levelTwo" name="levelTwo" value.bind="levelTwo">
          <option value="">Select a level 2 item</option>
          <option value="${$index}" repeat.for="option of data[levelOne].items">${option.name}</option>
        </select>
        Value: ${levelTwo}
      </div>

      <div class="form-group">
        <label for="levelThree">Level 3</label>
        <select id="levelThree" name="levelThree" value.bind="levelThree">
          <option value="">Select a level 3 item</option>
          <option value="${$index}" repeat.for="option of data[levelOne].items[levelTwo].items">${option.name}</option>
        </select>
        Value: ${levelThree}
      </div>

      <button type="submit" class="btn btn-default">Submit</button>

    </form>
  </section>
</template>

welcome.js

import {inject, BindingEngine} from 'aurelia-framework';

@inject(BindingEngine)
export class Welcome {

  data = [];

  levelOne = '';
  levelTwo = '';
  levelThree = '';

  constructor(bindingEngine) {

    this.bindingEngine = bindingEngine;

    let subscriptionOne = bindingEngine
      .propertyObserver(this, 'levelOne')
      .subscribe((newValue, oldValue) => this.levelOneChange(newValue, oldValue));

    let subscriptionTwo = bindingEngine
      .propertyObserver(this, 'levelTwo')
      .subscribe((newValue, oldValue) => this.levelTwoChange(newValue, oldValue));
  }

  activate() {
    return new Promise((accept, reject) => {
      /** Generate some random values */
      for (let i = 0, j = this.randomInt(5, 20); i < j; i++) {
        let subSetLevel1 = { name: Math.random().toString(26).substring(this.randomInt(5, 25)), items: [] };
        for (let ii = 0, jj = this.randomInt(5, 20); ii < jj; ii++) {
          let subSetLevel2 = { name: Math.random().toString(26).substring(this.randomInt(5, 25)), items: [] };
          for (let iii = 0, jjj = this.randomInt(5, 20); iii < jjj; iii++) {
            let subSetLevel3 = { name: Math.random().toString(26).substring(this.randomInt(5, 25)), items: [] };
            for (let iiii = 0, jjjj = this.randomInt(5, 20); iiii < jjjj; iiii++) {
              subSetLevel3.items.push(Math.random().toString(26).substring(this.randomInt(5, 25)));
            }
            subSetLevel2.items.push(subSetLevel3);
          }
          subSetLevel1.items.push(subSetLevel2);
        }
        this.data.push(subSetLevel1);
      }
      console.log(this.data);
      accept();
    });
  }

  submit() {
    alert(JSON.stringify(this.form));
  }

  randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  levelOneChange(newValue, oldValue) {
    this.levelTwo = '';
    this.levelThree = '';
  }

  levelTwoChange(newValue, oldValue) {
    this.levelThree = '';
  }
}