title: How to make a dropdown list change multiple properties of a view model?
body: <p>I code (see <a href="http://jsfiddle.net/s75K6/2/" rel="nofollow">this jsfiddle</a>) as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Knockout with jQuery UI Widget Bindings&lt;/h2&gt;
  
  &lt;div&gt;
    &lt;label for='from'&gt;Date From:&lt;/label&gt;
    &lt;input id='from' type='text' 
      data-bind='jqueryui: "datepicker",
                 value: from' /&gt;
    &lt;small&gt;(with datepicker)&lt;/small&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;label for='to'&gt;Date To:&lt;/label&gt;
    &lt;input id='to' type='text' 
      data-bind='jqueryui: "datepicker",
                 value: to' /&gt;
    &lt;small&gt;(with datepicker)&lt;/small&gt;
  &lt;/div&gt;
  
  &lt;select id="Range" name="Range" data-bind="value: range, options:ranges, optionsText:'name'"&gt;
  </code></pre>
  
  <p>And this Javascript:</p>
  
  <pre><code>var viewModel = {
      ranges : [
          {name:'Yesterday',value:'Yesterday'}, 
          {name:'Last7Days',value:'Last 7 Days'}, 
          {name:'Last14Days',value:'Last 14 Days'}, 
          {name:'LastFullWeek',value:'Last Full Week'}, 
          {name:'LastFullFortnight',value:'Last Full Fortnight'}, 
          {name:'LastFullThreeWeeks',value:'Last Full Three Weeks'}, 
          {name:'LastMonth',value:'Last Month'}, 
          {name:'MonthToDate',value:'Month To Date'}, 
          {name:'LastQuarter',value:'Last Quarter'}, 
          {name:'Select',value:'Select'}
      ],
      from: ko.observable(''),
      to: ko.observable(''),
      range: ko.observable('')
  };
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>I want to reset the date from and date to when I select a value from the drop down list.
  In the same way, if I manually select a value via datepicker, I want to change the dropdownlist to be "Select"</p>
  
  <p>Any idea on how to do this?</p>