title: how to perform setfocus(); to the dropdown list
body: <p>I'm having a dropdown list which loads the records from DB on OnLoad() event, I want to set focus on the dropdown box when the page loads. I have tried many ways to set focus but its not working. pls look at the code below.</p>
  
  <p>HTML CODE is as follows,</p>
  
  <pre><code> &lt;body onLoad="getDataSourceList()"&gt;
  &lt;div class="wrapper"&gt;   
  
  
      &lt;form id="myUploadForm" name="myUploadForm"&gt;
  
      &lt;table width="100%"&gt;
              &lt;tr&gt; &lt;td align="right"&gt;&lt;label for="dataSourceId" style=" font-family: serif; font-size: small;"&gt;DataSource Type&lt;b style="color: red"&gt;*&lt;/b&gt;: &lt;/label&gt; &lt;/td&gt; 
                   &lt;td&gt;&lt;select name="dataSourceType" id="dataSourceId"&gt;
                          &lt;option value="Select"&gt; Select&lt;/option&gt;
                      &lt;/select&gt;
                   &lt;/td&gt; 
              &lt;/tr&gt;
  
          &lt;/table&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p>My ajax code goes below :</p>
  
  <pre><code>function getDataSourceList() {
      $.ajax({
          url : '/DataWeb/getAllDataSources',
          type : 'post',
          dataType : 'json',
          contentType : 'application/json',
  
          success : function(map) {
              console.log(map);
              var select = document.getElementById("dataSourceId");
              for (index in map) {
                  select.options[select.options.length] = new Option(
                          map[index], index);
              }
          },
  
          error : function(map) {
              console.log(map);
              console.log("error occured!!!");
          },
  
      });
      document.getElementById('dataSourceId').focus();
  }
  </code></pre>
  
  <p>Thanks in advance.</p>