title: Does ko.dataFor() work with `select` elements?
body: <p>I'm trying to use <code>ko.dataFor()</code> on a <code>select</code> element but it's returning the whole ViewModel. I'm expecting to get the object of the selected <code>option</code>, but I always get the ViewModel instead. I've tried passing the <code>select</code> and the <code>option</code> but either way I get the same result.</p>
  
  <p><a href="http://jsfiddle.net/LzAAB/3/" rel="nofollow">http://jsfiddle.net/LzAAB/3/</a></p>
  
  <pre><code>&lt;select id="companies" data-bind="options: companies, optionsText: 'name', optionsValue: 'id', optionsCaption: ' ' "&gt;&lt;/select&gt;
  &lt;br/&gt;
  ko.DataFor(select)&lt;br/&gt;
  &lt;textarea id="a" cols="40" rows="10"&gt;&lt;/textarea&gt;
  &lt;br/&gt;
  ko.DataFor(option)&lt;br/&gt;
  &lt;textarea id="b" cols="40" rows="10"&gt;&lt;/textarea&gt;
  &lt;br/&gt;
  &lt;div data-bind="text: ko.toJSON($root)"&gt;&lt;/div&gt;
  
  
  function MyViewModel() {
      var self = this;
      self.companies = ko.observableArray([{id:1, name: "Chevy"},{id:2, name: "Ford"}, {id:2, name: "Dodge"}]);
      self.countries = ko.observableArray([{id:1, name: "USA"},{id:2, name: "Canada"}, {id:2, name: "Mexico"}]);
  }
  
  var vm = new MyViewModel();
  
  ko.applyBindings(vm);
  
  $("#companies").change(function(){    
      $("#a").val("dataFor("+this.id+"):"+  ko.toJSON(ko.dataFor(this)));
  
      var selectedOption = $(this).find(":selected")[0];
      $("#b").val("dataFor("+this.id+"):"+  ko.toJSON(ko.dataFor(selectedOption)));
  });
  </code></pre>