Different behaviors on jQuery row deselect, and I don't understand why

Question

I have two variations of code, each variation has a desired behavior, and an undesired behavior... But I don't understand why this is happening, or how to combine them to get both desired behaviors. (I've tried different variations of if/else statements trying to get both of the desired behaviors in one code, but I'm unsuccessful so far.

Variation 1: http://jsfiddle.net/crashvector/q81m7sab/15/

Correct behavior: You can select a row, change the drop down that appears, (the drop down value writes to the table) and you can deselect the row. (The check-uncheck column updates from a 1 to a 0.)

Undesired behavior: You can select a row, and then immediately deselect it. The check-uncheck column updates from 1 to 0, BUT the drop down doesn't write it's current value to the table and disappear.

}).on('deselect', function (e, dt, type) {
    var dt_indexes = dt[0]
    if (type === 'row') { 
      $.each( dt_indexes, function ( index ) {
        var row = dataTable.row( dt_indexes[index] );

        if(!Category && !Category.length) {
        writeCell($(row.node()).find('select'));
        };

        toggleDataAndDraw(row, type, 0); 
     } );     
    }
    dataTable.draw();
  });
var writeCell = dropdown => {
        var currentRow = dataTable.row(dropdown.closest('tr'));
        var rowData = currentRow.data();
        rowData.Category = dropdown.val();
        $(currentRow.node()).find('td:eq(6)').html( 
          currentRow.data().Category
        );
        currentRow.draw();
      };

Variation 2: http://jsfiddle.net/crashvector/q81m7sab/16/

Correct behavior: You can select a row, and then immediately deselect it. The check-uncheck column updates from 1 to 0, the drop down value writes to the table and disappears.

Undesired behavior: You can select a row, change the drop down that appears, (the drop down value writes to the table) and you can deselect the row. BUT the check-uncheck column DOESN'T update from a 1 to a 0.

}).on('deselect', function (e, dt, type) {
    var dt_indexes = dt[0]
    if (type === 'row') { 
      $.each( dt_indexes, function ( index ) {
        var row = dataTable.row( dt_indexes[index] );

        //if(!Category && !Category.length) {
        writeCell($(row.node()).find('select'));
        //};

        toggleDataAndDraw(row, type, 0); 
     } );     
    }
    dataTable.draw();
  });

var writeCell = dropdown => {
    var currentRow = dataTable.row(dropdown.closest('tr'));
    var rowData = currentRow.data();
    rowData.Category = dropdown.val();
    $(currentRow.node()).find('td:eq(6)').html( 
      currentRow.data().Category
    );
    currentRow.draw();
  };

END GOAL One function that has both correct behaviors and neither undesired behavior.

Answer 1

From your jsFiddle "Variation 1"... Simply change the condition (on line #222):

if(!Category && !Category.length) {

to:

if($(row.node()).find('select').length){

So it will execute writeCell() if the <select> is still present when the user is unchecking the row.