How to register an onchange event listener in HTML returned by column.render?

Hedma

I am trying to display an HTML Select dropdown inside a DataTable column and attach an onchange event listener to it such that whenever the selection is changed, a function can execute.

My attempt so far is like this:

var changeEventListener = function(thisRow) {
    console.log(thisRow);
    // Additional processing...
}

$("#myTable").DataTable({
    columns: [
        {
        data: data,
        render: function(data, type, row) {
            return "<select onchange=\"changeEventListener(row)\"><option>ONE</option><option>TWO</option></select>";
        }
    }]
});

In the browser console, the error is "row is not defined".

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

allan

Just to add to Colin's point about needing a test case, don't register an onChange DOM0 event like that. I would suggest instead using an event listener like in this example (it is for click, but the point stands - you'd listen for change on the select elements instead).

Allan