title: knockout.js - setting an empty selection
body: <p>I'm trying to use knockout.js to populate and manage a <code>&lt;select/&gt;</code> box.  I'd like the initial value to be empty.</p>
  
  <p>However, I'm having trouble trying to force the managed value to be null at any time, let alone initially.</p>
  
  <p>For example, consider <a href="http://jsfiddle.net/XjVBN/1/" rel="nofollow noreferrer">this fiddle</a>:</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;select data-bind="options: myOptions, value: myValue"&gt;&lt;/select&gt; aka
  &lt;span data-bind="text: myValue"&gt;&lt;/span&gt;
  
  &lt;div&gt;
      &lt;button data-bind="click: setMyValue(null)"&gt;clear the selection&lt;/button&gt;
      &lt;button data-bind="click: setMyValue('one')"&gt;select "one"&lt;/button&gt;
      &lt;button data-bind="click: setMyValue('four')"&gt;select "four"&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul data-bind="foreach: log"&gt;
      &lt;li&gt;message: &lt;span data-bind="text: message"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function Model() {
      var self = this;
      self.myOptions = ['one', 'two', 'three', 'four'];
      self.myValue = ko.observable();
      self.setMyValue = function (val) {
          return function(){
              this.log.push({
                  message: "ok, trying to set value as " + val
              });
              self.myValue(val);
          };
      };
      self.log = ko.observableArray([]);
  }
  var model = new Model();
  ko.applyBindings(model);
  </code></pre>
  
  <p>The <code>select "one"</code> and <code>select "four"</code> buttons work to change the selection by forcing an update of <code>myValue()</code>.  However, the clear the selection button doesn't work.  The selection is not cleared by <code>myValue(null)</code>, <a href="https://stackoverflow.com/questions/8137222/knockoutjs-clear-selected-value-in-combobox">which is what I thought was the proper way to do it</a>.</p>
  
  <p>What am I doing wrong?</p>