Блог

У меня есть выпадающее окно, и значения в выпадающем списке генерируются в результате вызова ajax. Мой вопрос заключается в том, как обработать событие для выпадающего списка при изменении значения или как вызвать функцию в onChange() . Я новичок в JavaScript. Это мой код:

 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;
        } 
    }
});
  

Самый простой способ, я думаю, был бы таким:

 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
        };
    }
});
  

Конечно, вы можете определить обработчик в другом месте, например:

 function onLitterSequencesChange() {
    // Your code
}
  

и:

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