Knockout Cascading Dropdown
Cascading dropdown databinding with odata and knockout.
HTML
<script src="https://raw.github.com/gist/1175460/fb7404d46cab20e31601740ab8b35d99a584f941/linq.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<label for="ddlYear">Year</label>
<select id="ddlYear" data-bind="options: years, value: selectedYear"></select>
<label for="ddlMake">Make</label>
<select id="ddlMake" data-bind="options: makes, value: selectedMake"></select>
<label for="ddlModel">Model</label>
<select id="ddlModel" data-bind="options: models"></select>
JavaScript
var makeModelList = [
{
year: 1984, make: 'Chevrolet', model: 'Camaro'},
{
year: 1992,
make: 'Ford',
model: 'F150'},
{
year: 1992,
make: 'Toyota',
model: 'Camry'},
{
year: 1998,
make: 'Honda',
model: 'Accord'},
{
year: 2002,
make: 'Nissan',
model: 'Altima'},
{
year: 2002,
make: 'Ford',
model: 'Taurus'},
{
year: 2003,
make: 'Dodge',
model: 'Intrepid'},
{
year: 2003,
make: 'Mitsubishi',
model: 'Eclipse'},
{
year: 2009,
make: 'Hyundai',
model: 'Sonata'},
{
year: 2009,
make: 'Hyundai',
model: 'Elantra'},
{
year: 2009,
make: 'Hyundai',
model: 'Accent'}
];
var viewModel = {
years: ko.observable(),
makes: ko.observable(),
models: ko.observable()
};
viewModel.years = ko.dependentObservable(function() {
return Enumerable.From(makeModelList).Select(function(it) {
return it.year;
}).OrderBy(function(it) {
return it.year;
}).Distinct().ToArray();
}, viewModel);
viewModel.makes = ko.dependentObservable(function() {
var selectedYear = this.selectedYear();
return Enumerable.From(makeModelList).Where(function(it) {
return it.year == selectedYear;
}).Select(function(it) {
return it.make;
}).ToArray();
}, viewModel);
viewModel.models = ko.dependentObservable(function() {
var selectedYear = this.selectedYear();
var selectedMake = this.selectedMake();
return Enumerable.From(makeModelList).Where(function(it) {
return it.year == selectedYear;
}).Where(function(it) {
return it.make == selectedMake;
}).Select(function(it) {
return it.model;
}).ToArray();
}, viewModel);
ko.applyBindings(viewModel);