重置数据表下拉选择过滤器

Question

在我的Laravel项目中，我正在使用数据表过滤器，并且它工作正常。我的问题是我想添加一个额外的Reset按钮。当我单击Reset按钮时，所有选择字段都将设置为其默认值。图片附：

这是我的剧本

<script>
    $(document).ready(function() {
        $('#exampletable').DataTable( {
            "ordering": false,
            initComplete: function () {
                this.api().columns([3,4,5,9]).every( function (d) {//THis is used for specific column
                    var column = this;
                    var theadname = $('#exampletable th').eq([d]).text();
                    var select = $('<select class="form-control my-1"><option value="">'+theadname+': All</option></select>')
                    .appendTo( '#filtertable' )
                    .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 ) {
                        var val = $('<div/>').html(d).text();
                        select.append( '<option value="'+val+'">'+val+'</option>' )
                    } );
                } );
            }
        } );
    } );
</script>

这是我的模态，我在其中放置了过滤器选项字段

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-dialog-slideout" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal sideout normal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Launch demo modal sideout normal -->
                <div class="row">
                    <div class="form-group col-8" id="filtertable">
                        {{-- Here modal value comes through script --}}
                    </div>
                    {{-- <div class="form-group col-8" >
                    </div> --}}
                </div>
            </div>
            <div class="modal-footer">
                <button id="resetColumn">Reset</button>
            </div>
        </div>
    </div>
</div>

Answer 1

使用表单标签包装代码，然后使用触发功能进行simpe操作。

$("form_id_here").trigger("reset");