title: dropdown onchange event not firing until second instance
body: <p>I am having the strangest problem, although I'm sure it's something simple - I'm stumped.  I have an event that hides and shows divs based on a dropdown menu.  When I pick something from my menu it does absolutely nothing.  However, if I change it to a second selection, it works perfectly.  Anyone know what I screwed up?  Thanks for any and all assistance.</p>
  
  <pre><code>function call1()
  {
  document.getElementById("quest1").onchange = function () {
    alert("ON CHANGE FIRED");
    var val = this.options[this.selectedIndex].value;
    document.getElementById("area1z").style.display = (val == "0") ? "block" : "none";
    document.getElementById("area1a").style.display = (val == "1") ? "block" : "none";
    document.getElementById("area1b").style.display = (val == "2") ? "block" : "none";
    document.getElementById("area1c").style.display = (val == "3") ? "block" : "none";
    document.getElementById("area1d").style.display = (val == "4") ? "block" : "none";
  };
  }
  
  &lt;select id="quest1" onChange="call1()"&gt;
  &lt;option value=0&gt;&lt;/option&gt;
  &lt;option value=1&gt;Stretch (Maintaining a lifestyle choice for an amount of time)            &lt;/option&gt;
  &lt;option value=2&gt;Sum (i.e. saving money, counting workouts, etc.&lt;/option&gt;
  &lt;option value=3&gt;Loss (i.e. Weightloss)&lt;/option&gt;
  &lt;option value=4&gt;None&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id=area1z style="display:none"&gt;Please Choose a Quest&lt;/div&gt;
  &lt;div id=area1a style="display:none"&gt;Stretch&lt;/div&gt;
  &lt;div id=area1b style="display:none"&gt;Sum&lt;/div&gt;
  &lt;div id=area1c style="display:none"&gt;Loss&lt;/div&gt;
  &lt;div id=area1d style="display:none"&gt;None&lt;/div&gt;
  </code></pre>