在选择 ajax 和 laravel 上显示 div

Question

我在包含数据表的索引页面上有两个 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')

Answer 1

改变这个

 <option>Select Search</option>
 <option>Indents</option>
 <option>Jobcards</option>

到这里

<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>

更新

您为 DIV 和 DropDown 提供了相同的 ID！ 使用这个

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

 $(function () {

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

    });
});

这是fiddle

更新 2

$('#indents').hide(); $('#jobcardd').hide();

$(function () {

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

        }

    });
});