在选择 ajax 和 laravel 时显示 div

Question

我在包含数据表的索引页上有两个 div 我需要默认隐藏两个 div 当我 select 下拉列表中的一个选项时我需要显示相应的div 基于 selection.

我正在使用此页面搜索 div 包含一个下拉菜单，其中包含两个选项 select.when 我 select 缩进它应该 return 对应 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();

        }

    });
});

在选择 ajax 和 laravel 时显示 div

show div on selection ajax and laravel

javascript

ajax

jquery

laravel

laravel-5.6

更新

更新 2