Select Inputs bug

muscaiu

I'm using this code to render the select inputs:

        initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

I noticed when i select a value from dropdown and then refresh the page, the results don't update anymore.
Here is an animation i made to get a clearer picture: https://drive.google.com/file/d/0B4nUvzf87W8KcnduOUJfbjk4ZzQ/view?pref=2&pli=1

Is there any way to prevent or fix this?
Thank you.