title: show div on selection ajax and laravel
body: <p>I have two div on index page that contains a datatable i need to hide two div by default when I select an option in dropdown then i need to show that corresponding div based on selection.</p>
  
  <p>I am using this page for searching a div contains a drop downmenu contains two options to select.when i select indents it should return that corresponding div</p>
  
  <p>Index File</p>
  
  <pre><code>    @include('theme.header')
  
  
  &lt;br&gt;
  &lt;div class="row" id="dropsearch"&gt;
      &lt;div class="col-12"&gt;
          &lt;div class="card m-b-30"&gt;
              &lt;div class="card-body "&gt;
  
                  &lt;h4 class="mt-0 header-title"&gt;Search Indent&lt;/h4&gt;
  
  
                  &lt;label class="pull-left"&gt;
                      &lt;select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch"&gt;
                          &lt;option&gt;Select Search&lt;/option&gt;
                          &lt;option&gt;Indents&lt;/option&gt;
                          &lt;option&gt;Jobcards&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/label&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row" id="indents"&gt;
      &lt;div class="col-12"&gt;
          &lt;div class="card m-b-30"&gt;
              &lt;div class="card-body "&gt;
  
                  &lt;h4 class="mt-0 header-title"&gt;Search Indent&lt;/h4&gt;
  
  
                  &lt;input type="text" id="searchid" name="searchid" class="pull-right form-control-sm"&gt;
  
                  &lt;label class="pull-right"&gt;search&lt;/label&gt;
  
                  &lt;br&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;table id="datatable" class="table table-bordered table-responsive-lg"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Slno&lt;/th&gt;
                          &lt;th&gt;Customer Name&lt;/th&gt;
                          &lt;th&gt;Customer Phone Number&lt;/th&gt;
                          &lt;th&gt;DateOfDelivery&lt;/th&gt;
                          &lt;th&gt;Delivery At&lt;/th&gt;
                          &lt;th&gt;Redistraion Mode&lt;/th&gt;
                          &lt;th&gt;Chassis No&lt;/th&gt;
                          &lt;th&gt;Engine No&lt;/th&gt;
                          &lt;th&gt;Show&lt;/th&gt;
  
                      &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody id="searchinfo"&gt;
                      &lt;tr&gt;
                      &lt;/tr&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;div class="row" id="jobcardd"&gt;
      &lt;div class="col-12"&gt;
          &lt;div class="card m-b-30"&gt;
              &lt;div class="card-body bg-secondary text-white"&gt;
  
                  &lt;h4 class="mt-0 header-title"&gt;Search Jobcard&lt;/h4&gt;
  
  
                  &lt;input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm"&gt;
  
                  &lt;label class="pull-right"&gt;search&lt;/label&gt;
  
                  &lt;br&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;table id="datatable" class="table table-bordered table-responsive-lg"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Slno&lt;/th&gt;
                          &lt;th&gt;Jobcard No&lt;/th&gt;
                          &lt;th&gt;Customer Order No&lt;/th&gt;
                          &lt;th&gt;Ticket No&lt;/th&gt;
                          &lt;th&gt;Bill No&lt;/th&gt;
                          &lt;th&gt;Show&lt;/th&gt;
  
  
                      &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody id="searchjobcard"&gt;
                      &lt;tr&gt;
                      &lt;/tr&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#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);
                  }
              })
  
          })
      });
  
  &lt;/script&gt;
  &lt;script&gt;
      $.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
  &lt;/script&gt;
  
  
  @include('theme.footer')
  </code></pre>