jsobell/app.html

## app.html
<template>
  <section>
    <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.bind="$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.bind="$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.bind="$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>

## app.js
import {inject, ObserverLocator} from 'aurelia-framework';

@inject(ObserverLocator)
export class App {

  data = [];

  levelOne = '11';
  levelTwo = '22';
  levelThree = '33';

  constructor(observerLocator) {

  /*  this.observerLocator = observerLocator;
    let subscriptionOne = observerLocator
      .getObserver(this, 'levelOne')
      .subscribe(this.levelOneChange);

    let subscriptionTwo = observerLocator
      .getObserver(this, 'levelTwo')
      .subscribe(this.levelTwoChange);*/
  }


  activate() {
      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);
  }

  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 = '';
  }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>
	<section>
	<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.bind="$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.bind="$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.bind="$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>
	import {inject, ObserverLocator} from 'aurelia-framework';

	@inject(ObserverLocator)
	export class App {

	data = [];

	levelOne = '11';
	levelTwo = '22';
	levelThree = '33';

	constructor(observerLocator) {

	/* this.observerLocator = observerLocator;
	let subscriptionOne = observerLocator
	.getObserver(this, 'levelOne')
	.subscribe(this.levelOneChange);

	let subscriptionTwo = observerLocator
	.getObserver(this, 'levelTwo')
	.subscribe(this.levelTwoChange);*/
	}


	activate() {
	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);
	}

	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 = '';
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>