title: knockoutjs dependent select boxes problems binding child select box
body: <p>Similar to the knockoutjs shopping cart example, I have a list of packages, and the price depends on the location. I am unable to bind the dependent select box (the locationOptions) with the view:</p>
  
  <pre><code>&lt;select data-bind="options: packages,
                     optionsCaption: 'Select...',
                     optionsText: 'name',
                     value: selectedPackage"&gt;                 
  &lt;/select&gt;
  
  &lt;select data-bind="options: locationOptions,
                     optionsCaption: 'Select...',
                     optionsText: 'location',
                     value: selectedLocation"&gt;
  &lt;/select&gt;
  
  &lt;span data-bind="with: selectedPackage"&gt;
      &lt;p&gt;You have chosen &lt;b data-bind="text: name"&gt;&lt;/b&gt; (&lt;span data-bind="text: description"&gt;)&lt;/span&gt;
      In location &lt;b data-bind="text: location"&gt;&lt;/b&gt;&lt;/p&gt;
      &lt;p&gt;Total is &lt;b data-bind="text: total"&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>view model:</p>
  
  <pre><code>function viewModel(packages, addons) {
      this.packages = packages;
      this.selectedPackage = ko.observable();
      this.selectedLocation = ko.observable();
      this.total = ko.computed(function(){
          var x = 0;
          return x;
      });
  }
  </code></pre>
  
  <p>Here is the jsfiddle <a href="http://jsfiddle.net/KN4P6/6/" rel="nofollow">http://jsfiddle.net/KN4P6/6/</a></p>