onChange event to a list created dynamically

Question

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?

Basically I want to make the dynamic drop down list do what is in the below html tags.

<select id='EmpLst' name="dwnlist" 
    onchange='document.getElementById("val1").value = this.value;'>

    <option value="">SELECT ID</option>
</select>

Javascript:

<script type="text/javascript">

 $(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 && 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 += 
                         '<option value="'+d[o].title+'">'+d[o].title+'</option>';
                 }
             }
         }
     }

     hr.send("null");
});
</script>

Answer 1

Simply change this code

var EmpLst = document.getElementById("EmpLst");
    for(var o in d){
        if(d[o].title){
            EmpLst.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
        }
    }

to

var EmpLst = document.getElementById("EmpLst");
EmpLst.innerHTML += '<option >SELECT ID</option>';
    for(var o in d){
        if(d[o].title){
            EmpLst.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
        }
    }

Answer 2

You can use below code :

<script type="text/javascript">
    $(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 && hr.status == 200) {
        var d = JSON.parse(hr.responseText);

        var selectOption = "<option value='-1'>Select ID</option>";
        for(var o in d){
            if(d[o].title){
                selectOption += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
            }
        }
       $("#EmpLst").html(selectOption);// set your select options here


       $("#EmpLst").on("change",function(){
          $("#val1").val($(this).val());// set changed value to val1 text
       });
    }
}
    hr.send("null");
});
</script>

Answer 3

You have to attach a single event listener to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future. This concept is called event delegation

Try the following code:

Put the 'select' tag inside a div

<div class='container'>
    <select id='EmpLst' name="dwnlist" 
       onchange='document.getElementById("val1").value = this.value;'>

       <option value="">SELECT ID</option>
    </select>
</div>

Javascript

$(document).ready(function() {
    $('div.container').on('#EmpLst','change',function() {
        //write your change event here
    });
})

You can read an article about event delegation here