Hierarchical Select Using Aurelia - html

Question

I'm writing a mobile application using Aurelia (Cordova, Typescript, HTML5, & Bootstrap) and I need to do a hierarchical select where the selection from one SELECT list filters the options in the next SELECT list. Does anyone know how to do this in Aurelia? My code with the bindings are below. The list in selRatedItems needs to be filtered by what is selected in selCategories. Thanks for any help.
<div class="row">
<div class="form-group form-group-sm">
<label for="selCategory" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select class="form-control" id="selCategory" value.bind="selectedCategory" required>
<option value="">Select a category...</option>
<option repeat.for="option of categories" model.bind="option">${option.name}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm">
<label for="selRatedItem" class="col-sm-2 control-label">Rated Item</label>
<div class="col-sm-10">
<select class="form-control" id="selRatedItem" value.bind="selectedItem" required>
<option value="">Select an item...</option>
<option repeat.for="option of selectedCategory.rateditems" model.bind="option.rateditems.id">${option.rateditems.name}</option>
</select>
</div>
</div>
</div>

Answer 1

Here's how I resolved this...
First, I had to add a computed property in the view model that was based off of a property bound to the selCategory SELECT list from above.
Added import statement:
import { computedFrom } from 'aurelia-framework';
Added property:
#computedFrom('selectedCategory')
get rateditems() {
if (this.selectedCategory && this.selectedCategory.rateditems) {
return Object.keys(this.selectedCategory.rateditems).map(key => this.selectedCategory.rateditems[<any>key]);
}
else {
var array: any[] = [];
return array;
}
}
Then, I bound the SELECT list that is to be filtered, in this case, selRatedItem, to the computed property.
Newly bound SELECT list:
<div class="row">
<div class="form-group form-group-sm">
<label for="selRatedItem" class="col-sm-2 control-label">Rated Item</label>
<div class="col-sm-10">
<select class="form-control" id="selRatedItem" value.bind="selectedItem" required>
<option value="">Select an item...</option>
<option repeat.for="item of rateditems" model.bind="item.id">${item.name}</option>
</select>
</div>
</div>
</div>