I have two dropdown filters, each searches a different column in my datatable. I also have stateSave set to true.

The datatable maintains state when the page is reloaded (as expected) but the two dropdown filters reset to the first option ("All") which incorrectly reflects the current state. How can I have the dropdown reflect the current state on page reload?

HTML

<div class="col-sm-3">
    <p>
        Graduating year
        <select id="grad-filter" class="filter form-control" data-column-index='2'>
            <option value="">All</option>
        </select>
    </p>
</div>
<div class="col-sm-3">
    <p>
        Participation reason
        <select id="participation-filter" class="filter form-control" data-column-index='4'>
            <option value="">All</option>
        </select>
    </p>
</div>

JS

        $(document).ready(function() {
            $.fn.dataTable.moment( 'MMM DD, YYYY' );
            var table = $('#outreach').DataTable( {
                "order": [[0, "desc"]],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "language": {
                    "zeroRecords": "No entries found. Please adjust your search parameters.",
                    "info": "Showing page _PAGE_ of _PAGES_",
                    "infoEmpty": "No entries found"
                },
                "stateSave": true,
                "stateDuration": 3600,
                "initComplete": function() {
                    this.api().columns([2]).every(function() {
                        var column = this;
                        var select = $("#grad-filter");
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="'+d+'">'+d+'</option>')
                        });
                    });
                    this.api().columns([4]).every(function() {
                        var column = this;
                        var select = $("#participation-filter");
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="'+d+'">'+d+'</option>')
                        });
                    }); 
                } 
            });

             $('.filter').on('change', function(){
                // table.search(this.value).draw();
                //clear global search values
                table.search('');
                table.column($(this).data('columnIndex')).search(this.value).draw();
            });