title: onChange event to a list created dynamically
body: <p>I'm having a drop down list which is populated by MySql data using Json. How do I show the first item as "SELECT ID" and set an onChange event to a text field on the page?</p>
  
  <p>Basically I want to make the dynamic drop down list do what is in the below html tags.</p>
  
  <pre><code>&lt;select id='EmpLst' name="dwnlist" 
      onchange='document.getElementById("val1").value = this.value;'&gt;
  
      &lt;option value=""&gt;SELECT ID&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   $(document).ready(function(){
       var hr = new XMLHttpRequest();
       hr.open("GET", "json_mysql_data.php", true);
       hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       hr.onreadystatechange = function() {
           if(hr.readyState == 4 &amp;&amp; hr.status == 200) {
               var d = JSON.parse(hr.responseText);
               var EmpLst = document.getElementById("EmpLst");
  
               for(var o in d){
                   if(d[o].title){
                       EmpLst.innerHTML += 
                           '&lt;option value="'+d[o].title+'"&gt;'+d[o].title+'&lt;/option&gt;';
                   }
               }
           }
       }
  
       hr.send("null");
  });
  &lt;/script&gt;
  </code></pre>