title: Set value of a select HTML element reactively with Meteor
body: <p>I want to set the value of an HTML <code>&lt;select&gt;</code> element reactively, without changing the various options for the element. I have found a solution, but it in not elegant.</p>
  
  <p>To test, create a barebones Meteor app with <code>create meteor select</code> and change the contents of the select.html and select.js files to the following:</p>
  
  <p>select.html</p>
  
  <pre><code>&lt;body&gt;
    {{&gt; select}}
  &lt;/body&gt;
  
  &lt;template name="select"&gt;
    &lt;label for="select"&gt;{{category}}&lt;/label&gt;
  
    &lt;select id="select"&gt;
      &lt;option value='' disabled selected style='display:none;'&gt;Select...&lt;/option&gt;
      &lt;option value="Animal"&gt;Animal&lt;/option&gt; 
      &lt;option value="Vegetable"&gt;Vegetable&lt;/option&gt;
      &lt;option value="Mineral"&gt;Mineral&lt;/option&gt;
    &lt;/select&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>select.js</p>
  
  <pre><code>if (Meteor.isClient) {
    Session.set("category", "")
    Session.set("label", "Category")
  
    Template.select.onRendered(function () {
      setSelectValue()
    })
  
    Template.select.helpers({
      category: function () {
        setSelectValue()
        return Session.get("label")
      }
    });
  
    function setSelectValue() {
      var select = $("#select")[0]
      if (select) {
        select.value = Session.get("category")
      }
    }
  }
  </code></pre>
  
  <p>Now launch your app. In the browser console, you can change the value of the <code>category</code> Session variable:</p>
  
  <pre><code>Session.set("category", "Animal")
  </code></pre>
  
  <p>However, the select element will not update until you change the label:</p>
  
  <pre><code>Session.set("label", "category") // was "Category'
  </code></pre>
  
  <p>Now the select element updates, and any subsequent change the <code>category</code> Session variable will also update the select element.</p>
  
  <pre><code>Session.set("category", "Vegetable") // Now the select element updates
  </code></pre>
  
  <p>Is it possible to achieve the same effect directly, without using this clumsy workaround?</p>