title: Knockout.js Binding of select options and value inside a foreach binding
body: <p>I am attempting to create a set of drop down lists in such a way that it is possible to dynamically add a new drop down list to the set.  An example would be a form to order a pizza, with a set of select tags for toppings.  We don't know how many toppings the user wants, so we'll start with one and dynamically add a new select when the user selects their first topping.</p>
  
  <p>The problem I am running into is that the value binding on the select is not working correctly.  If the value object is initially set, select will bind to it, but any changes will not update the observable in the VM.</p>
  
  <p>I have tried all different kinds of methods to bind based on $data, using an alias, using different contexts to walk back to the object, and binding the context in different places using virtual elements, etc.</p>
  
  <p>This example is a bit contrived as there would be other code involved to actually add more selects, etc, but it does replicate the issue I am seeing.  Simply select a couple of toppings and click the Check Values button to find the selection was not set in the VM.</p>
  
  <p><a href="http://jsfiddle.net/x6u0hutm/5/" rel="nofollow">http://jsfiddle.net/x6u0hutm/5/</a></p>
  
  <pre><code>&lt;!-- ko foreach: {data: selectedPropertyNames} --&gt;
  &lt;select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"&gt;&lt;/select&gt;
  &lt;!-- /ko --&gt;
  &lt;button type="button" data-bind="click: checkValues"&gt;Check Values&lt;/button&gt;
  
  function ViewModel() {
      var self = this;
      this.nameOptions = ko.observableArray([]);
      this.selectedPropertyNames = ko.observableArray([]);
  
      var firstSelection = ko.observable(null);
      this.selectedPropertyNames.push(firstSelection);
  
      var secondSelection = ko.observable('Beef');
      this.selectedPropertyNames.push(secondSelection);
  
      this.nameOptions(['Pepperoni', 'Beef', 'Pineapple', 'Green Peppers', 'Extra Cheese']);
  
      this.checkValues = function () {
          for (var i = 0; i &lt; self.selectedPropertyNames().length; i++) {
              console.log(self.selectedPropertyNames()[i]());
          }
      }
  };
  
  ko.applyBindings(new ViewModel());
  </code></pre>