Add a custom drop-down to Datatable

Javascript codes

<script>
$(document).ready(function(){         
    let table = $('#kt_datatable').DataTable({
        responsive:true,
        order: [[0, 'desc']],
        columnDefs: [
            {
            targets: 7,
            searchable: false,
            orderable: false,

            }
        ],
        language: {
            'url' : datatable_lang_cdns.{{config('app.locale')}}                
        },
        "dom": 'l<"toolbar">ftip',
        initComplete: function () {
            this.api().columns([6]).every( function () {
                var column = this;
                var select = $('<select><option value="">All Role</option><select>')
                .appendTo( $('.toolbar').empty() )
                .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>' )
                 } );
            } );
        }
    });
});

</script>

Style codes:

<style>

.toolbar{
    display: inline-block;
    margin-left: 2%;
}
.dataTables_length{
    display: inline-block;
}
.dataTables_filter{
    display: inline-block;
    float: right;
}
</style>