title: Running javascript for dropdown on page load?
body: <p>I have a js function which controls the appearance of a select element upon change. However, the one thing i need is for the code to run from start so that when the element loads the selected options class should have already been applied.</p>
  
  <p>css:</p>
  
  <pre><code>  select {height: 50px; width: 80px; border: solid 1px #c8c8c8; color:rgba(0, 0, 0, 0);}
  select:focus, #select:focus {
    color:black;
  }
  
  .lightgrey {background: lightgrey}
  .green {background:green}
  .orange {background:orange}
  .yellow {background:yellow}
  .red {background:red}
  .purple {background:purple}
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function colourFunction(select) {
          var colour = select.options[select.selectedIndex].className;
  
          select.className = colour;
          select.blur();
      }
  </code></pre>
  
  <p>Select:</p>
  
  <pre><code>&lt;select class="selectElement" runat="server" id="dropdown_" onchange="colourFunction(this)"&gt;
                      &lt;option selected="selected" class="lightgrey" value="N"&gt;N&lt;/option&gt;
                      &lt;option class="green" value="G"&gt;G&lt;/option&gt;
                      &lt;option class="orange" value="O"&gt;O&lt;/option&gt;
                      &lt;option class="yellow" value="A"&gt;A&lt;/option&gt;
                      &lt;option class="red" value="R"&gt;R&lt;/option&gt;
                      &lt;option class="purple" value="U"&gt;U&lt;/option&gt;
                  &lt;/select&gt;
  </code></pre>
  
  <p>I want the class for N to be applied on load with color:rgba(0, 0, 0, 0);</p>