title: HTML Select Form Variable Default Value
body: <p>I am trying to set a default value for a HTML select form. I've read the posts on setting a constant default value for a select form. However, I want the default value to be the <strong>variable</strong> shirt.Color, which is either Small, Medium, or Large depending on the shirt. </p>
  
  <p>For example, if shirt.Color is Small, I want the select form to have Small selected; if shirt.Color is Medium, I want the select form to have Medium selected; if shirt.Color is Large, I want the select form to have Large selected.</p>
  
  <p>I know how to set default values for text boxes using data-binding. I set the default shirt color using the following:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-2"&gt;Shirt Color&lt;/label&gt;
      &lt;input type="text" name="color" data-bind="valueUpdate: 'input', value:shirt.Color" class="form-control" required /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there something similarly simple I could do for a select form? I'd rather not manually code each case for Small, Medium, and Large.</p>
  
  <p>I have tried doing </p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-sm-2 control-label col-sm-2"&gt;Shirt Size:&lt;/label&gt;
      &lt;select required name="type" data-bind="type: 'input', value: shirt.Size"&gt;
          &lt;option value="s"&gt;Small&lt;/option&gt;
          &lt;option value="m"&gt;Medium&lt;/option&gt;
          &lt;option value="l"&gt;Large&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, this always defaults to the first option, Small. </p>