title: selecting an option on dropdown <select> programmatically
body: <p>I have a page on a website that I am updating automatically from a web service. I am trying to set the value of a dropdown <code>&lt;select&gt;</code> before the page is loaded and I can see when I select the drop down the value I wanted is already highlighted however I want that option to be selected not highlight. This is my code in javascript:</p>
  
  <pre><code>document.getElementById('walkForAmount').selectedIndex = object.get("WalkForTime");
  </code></pre>
  
  <p>which is called automatically when the page is loaded. It sets the selectedIndex to an int 0 -15. And the HTML code:</p>
  
  <pre><code>  &lt;select id = "walkForAmount" name="walkForAmount" style="margin-left:2em;margin-top:-1em; width:4em;"&gt;
                                  &lt;option&gt;-&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Edit: below id the JS I use to generate options </p>
  
  <pre><code>$(document).ready(function() { 
  
      $("#walkForAmount").select2({
  
      }); 
  
      $("#walkForType").select2({
  
      });
  
      for (i = 1; i &lt; 16; i++) {
  
      $("#walkForAmount").append("&lt;option&gt;"+i+"&lt;/option&gt;");
  
      }
  
  });
  </code></pre>