title: Adding Javascript to ASP Dropdownlist on page load
body: <p>I'm working on an interactive web form that does not use an <code>UpdatePanel</code>, so I'm trying to use JavaScript to do most of the functionality. For this question, I'm trying to figure out how to get java script to add functions to a dropdownlist on PageLoad(). </p>
  
  <p>I have the following ASP file:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Default.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
              Discovery Form Templates
              &lt;asp:DropDownList ID="uiFormTemplates" runat="server" DataTextField="Subject" DataValueField="DiscoveryFormID" AppendDataBoundItems="true" OnChange="GetTemplateValue();"&gt;
                  &lt;asp:ListItem Text="--Select One--" Value=""/&gt;
              &lt;/asp:DropDownList&gt;
          &lt;/div&gt;
          &lt;div id="ChangePlate"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And then this javascript:</p>
  
  <pre><code>function GetTemplateValue()
  {
  var dropdown = document.getElementById("uiFormTemplates");
  var SelectedOption = dropdown.options[dropdown.selectedIndex].value;
  
  if (SelectedOption == null) {
      document.getElementById("ChangePlate").innerText = "There is nothing here.";
  }
  else {
      document.getElementById("ChangePlate").innerText = dropdown;
  }
  }
  </code></pre>
  
  <p>I'm trying to use the following javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $("#uiFormTemplates").onchange(function () { GetTemplateValue(); });
  });
  </code></pre>
  
  <p>When I remove <code>OnChange="GetTemplateValue()"</code> from the <code>dropdownlist</code>, nothing happens, even with the second javascript method. Did I write my code wrong, or am I not even approaching this from the right angle? Either code critiques or some direction would be helpful right now, I'm a js noob.</p>