Highlighting select filter containing a value

silkspin

When the code for cascading filters was inside initComplete I was able to change the background-color of the select element when it had a value and remove the style when the value was removed. I successfully used this code in the same place I've put it in the test case...

if (val === '') {
    $(select).css('color', '#000').css('background-color', '#fff');
} else {
    $(select).css('color', '#333').css('background-color', '#ff0');
}

Now that I've moved the cascading filter code into the buildSelect function I can't get it to work. It will change the select color but only until another select in another column has a value. Then the new value gets the yellow background and the previous select resets to white even with a value. I've had to change $(select) to $("thead tr:eq(1) td:eq(" + visIndex + ") select") because $(select) in this location gives [object Object] after I output it using console.log(select); in my dev version rather than the correct data shown in my working version.

Is there a way to make the style stick using this different method? The currently selected <option> doesn't show selected in the dev tools so I can't target all the select filters with values.

http://live.datatables.net/pusaxiyu/18/edit

kthorngren

Looks like you will want to move that come from the 'change event to this area:

   // The rebuild will clear the exisiting select, so it needs to be repopulated
   var currSearch = column.search();
        if ( currSearch ) {
          select.val( currSearch.substring(1, currSearch.length-1).replace(/\\(.)/g, '$1') );
        }
      

You are reselecting the selected option in this code so you should be able to update the highlighting here too.

Kevin

silkspin

Thank you Kevin. You were right. I've updated the test case with a new line of code in the above section and commented out the old code.