Proper use of select (pulldown) in table cell for local edits

bartt

I have embedded a select in the second column of my data table using columnDefs.render function . Other cells are contentEditable (set by columnDefs.createdCell function) so I need to use row.invalidate('dom') to get the underlying data updated for the eventual trip back to the server. Unfortunately the invalidate call steps on my data in the select column. I end up with the entire select html in the data after invalidate.
Is there some way to avoid having my data (in the second column) stepped on by invalidate?

        dtabl = $('#rulestable').DataTable({
            "columns": [
                {
                    "data": "order"
                },
                {
                    "data": "type"
                },
                {
                    "data": "value"
                },
                {
                    "data": "length"
                },
                {
                    "data": "mask"
                }
            ],
            "columnDefs": [
                {
                    targets: 0,
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).attr('contentEditable', true); // make the td editable
                    }
                },
                {
                    targets: 1,
                    orderable: false,
                    className: 'sel_type',
                    render: function (data, type, row) {
                        var sel = '<select>';
                        sel += '<option value="fixed"';
                        if (data == 'fixed')
                            sel += 'selected';
                        sel += '>fixed</option><option value="freeform"';
                        if (data == 'freeform')
                            sel += 'selected';
                        sel += '>freeform</option><option value="sequence"';
                        if (data == 'sequence')
                            sel += 'selected';
                        sel += '>sequence</option></select>';
                        return sel;
                    },
                },
                {
                    targets: 2,
                    orderable: false,
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).attr('contentEditable', true); // make the td editable
                    }
                },
                {
                    targets: 3,
                    orderable: false,
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).attr('contentEditable', true); // make the td editable
                    }
                },
                {
                    targets: 4,
                    orderable: false,
                    createdCell: function (td, cellData, rowData, row, col) {
                        $(td).attr('contentEditable', true); // make the td editable
                    }
                }
            ]
        });