Question

I have a dropdown box and the values in dropdown are generated from the ajax call.
My question is how to handle the event for the dropdown when the value is changed, or how to call a function in onChange(). I am new to JavaScript.
This is my code:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.util.Connect.asyncRequest('GET', '/mcm/litter/litterSequenceList', {        
        success:function(o) {
            data = YAHOO.lang.JSON.parse(o.responseText);
            generateTablesList(data);   
        },
        failure:function(o) {
            alert(o.statusText);
        },
        scope:this
    }));

        
    function generateTablesList(data) {
        var list ="<select style='width:125px' id='litterSequences' name='litterSequences'>";
        var opt;    
        opt = "<option value='null'></option>";
        for (var i=0; i<data.length; i++) {
            opt =  "<option value="+data[i]+">";
            opt = opt+data[i];
            opt = opt+"</option>";  
            list = list+opt;    
        }           
        list = list+"</select>";
        var listObj = document.getElementById("litterSequence");
        if(listObj) {
            listObj.innerHTML = list;
        } 
    }
});

Answer 1

The easiest way I think would be this:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.util.Connect.asyncRequest('GET', '/mcm/litter/litterSequenceList', {        
        success:function(o) {
            data = YAHOO.lang.JSON.parse(o.responseText);
            generateTablesList(data);   
        },
        failure:function(o) {
            alert(o.statusText);
        },
        scope:this
    }));


    function generateTablesList(data) {
        var list ="<select style='width:125px' id='litterSequences' name='litterSequences'>";
        var opt;    
        opt = "<option value='null'></option>";
        for (var i=0; i<data.length; i++) {
            opt =  "<option value="+data[i]+">";
            opt = opt+data[i];
            opt = opt+"</option>";  
            list = list+opt;    
        }           
        list = list+"</select>";
        var listObj = document.getElementById("litterSequence");
        if(listObj) {
            listObj.innerHTML = list;
        } 

        var dropDown = document.getElementById("litterSequences");
        dropDown.onchange = function() {
            // Whatever you need to do
        };
    }
});

Of course you can define the handler elsewhere, for example:

function onLitterSequencesChange() {
    // Your code
}

and:

(...)
var dropDown = document.getElementById("litterSequences");
dropDown.onchange = onLitterSequencesChange;
(...)