показать div при выборе ajax и laravel

У меня есть два div на индексной странице, которая содержит данные. Мне нужно скрыть два div по умолчанию, когда я выбираю параметр в раскрывающемся списке, тогда мне нужно показать соответствующий div на основе выбора.

Я использую эту страницу для поиска div, содержит раскрывающееся меню, содержит два параметра для выбора. Когда я выбираю отступы, он должен возвращать соответствующий div

Индексный файл

    @include('theme.header')


<br>
<div class="row" id="dropsearch">
    <div class="col-12">
        <div class="card m-b-30">
            <div class="card-body ">

                <h4 class="mt-0 header-title">Search Indent</h4>


                <label class="pull-left">
                    <select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch">
                        <option>Select Search</option>
                        <option>Indents</option>
                        <option>Jobcards</option>
                    </select>
                </label>

            </div>
        </div>
    </div>
</div>


<div class="row" id="indents">
    <div class="col-12">
        <div class="card m-b-30">
            <div class="card-body ">

                <h4 class="mt-0 header-title">Search Indent</h4>


                <input type="text" id="searchid" name="searchid" class="pull-right form-control-sm">

                <label class="pull-right">search</label>

                <br>
                <br><br>
                <table id="datatable" class="table table-bordered table-responsive-lg">
                    <thead>
                    <tr>
                        <th>Slno</th>
                        <th>Customer Name</th>
                        <th>Customer Phone Number</th>
                        <th>DateOfDelivery</th>
                        <th>Delivery At</th>
                        <th>Redistraion Mode</th>
                        <th>Chassis No</th>
                        <th>Engine No</th>
                        <th>Show</th>

                    </tr>
                    </thead>

                    <tbody id="searchinfo">
                    <tr>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<br>
<br>
<div class="row" id="jobcardd">
    <div class="col-12">
        <div class="card m-b-30">
            <div class="card-body bg-secondary text-white">

                <h4 class="mt-0 header-title">Search Jobcard</h4>


                <input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm">

                <label class="pull-right">search</label>

                <br>
                <br><br>
                <table id="datatable" class="table table-bordered table-responsive-lg">
                    <thead>
                    <tr>
                        <th>Slno</th>
                        <th>Jobcard No</th>
                        <th>Customer Order No</th>
                        <th>Ticket No</th>
                        <th>Bill No</th>
                        <th>Show</th>


                    </tr>
                    </thead>

                    <tbody id="searchjobcard">
                    <tr>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    $('#indents').hide();
    $('#jobcardd').hide();

    $(function () {

        $("#dropsearch").change(function () {
            if ($(this).val() == "indents") {
                $("#indents").show();
            }
            else if ($(this).val() == "jobcard") {
                $("#jobcardd").show();
            }

        });
    });


    $(document).ready(function () {
        $('#searchid').on('keypress', function () {
            $value = $(this).val();
            $.ajax({
                type: 'GET',
                url: '{{\Illuminate\Support\Facades\URL::to('searchindents')}}',
                data: {'searchid': $value},
                success: function (data) {
                    $('#searchinfo').html(data);
                    // console.log(data);
                }
            })

        })
    });


    $(document).ready(function () {
        $('#searchjob').on('keypress', function () {

            $value = $(this).val();
            $.ajax({
                type: 'GET',
                url: '{{\Illuminate\Support\Facades\URL::to('searchjobacard')}}',
                data: {'searchjob': $value},
                success: function (data) {
                    $('#searchjobcard').html(data);
                    // console.log(data);
                }
            })

        })
    });

</script>
<script>
    $.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
</script>


@include('theme.footer')