title: Cascading Dropdown using knockout.js
body: <p>I am trying to build a three step drop down series.  Easiest example I could think of was building a year/make/model drop down set.</p>
  
  <p>I have tried following the example at  and using another fiddle at  (another fiddle url ending with jsfiddle.net/rniemeyer/V2gvT/ ), but am having problems with the databinding.</p>
  
  <p>My fiddle has a static list of year/make/model objects to use, and the year list binds properly, but never get the make/model lists to databind.</p>
  
  <p><a href="http://jsfiddle.net/giltnerj0/Yrkbd/7/" rel="noreferrer">My Fiddle</a></p>
  
  <p>Simple Markup</p>
  
  <pre><code>&lt;label for="ddlYear"&gt;Year&lt;/label&gt;
  &lt;select id="ddlYear" data-bind="options: years, value: selectedYear"&gt;&lt;/select&gt;
  
  &lt;label for="ddlMake"&gt;Make&lt;/label&gt;
  &lt;select id="ddlMake" data-bind="options: makes, value: selectedMake'"&gt;&lt;/select&gt;
  
  &lt;label for="ddlModel"&gt;Model&lt;/label&gt;
  &lt;select id="ddlModel" data-bind="options: models"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>var viewModel = {
      selectedYear: ko.observable(""),
      selectedMake: ko.observable(""),
      selectedModel: 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);
  </code></pre>
  
  <p>Data is defined in the script block window</p>
  
  <pre><code>var makeModelList = [
  {
      year: 1984,
      make: 'Chevrolet',
      model: 'Camaro'},
  </code></pre>
  
  <p>etc.</p>
  
  <p>Tried to make it as simple as I could, but can't quite figure out why the selects are databinding like the examples I've tried to mimic.</p>