/* Dependent Table CRUD */
Route::post('/district-by-division', 'OfficeSetupController@getDistrictsByDivision');
Route::post('/thana-by-district', 'OfficeSetupController@getThanaByDistrict');
 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Response;
use DB;

class OfficeSetupController extends Controller {
    /* Dependent Table Start  */
    public function getDistrictsByDivision(Request $request){
        $data=$request->all();
        $districts=DB::table('districts')
        ->where('districts.division_id','=',$data['division'])
        ->select('id','bn_name')
        ->get();
        return Response::json($districts);
    }

    public function getThanaByDistrict(Request $request){
        $data=$request->all();
        $thana=DB::table('thanas')
        ->where('thanas.district_id','=',$data['districts'])
        ->select('id','bn_name')
        ->get();
        return Response::json($thana);
    }
    /* Dependent Table End  */

}

<div class="content">
    <section class="office_setup_wrapper">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-11 py-3">
                    <div class="office_setup_area">
                        <h2>Office Setup</h2>
                        <div class="form_area">
                            <form action="{{ route('store_office') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="bangladesh_teg">
                                            <div class="row">
                                                <div class="col-4">
                                                    <div class="form-group publish_post">
                                                        <select class="form-control" id="division" name="division" required>
                                                            <option value="">--বিভাগ--</option>
                                                            @foreach ($divisions as $division)
                                                            <option value="{{ $division->id }}">{{ $division->bn_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="form-group publish_post">
                                                        <select class="form-control" id="district" name="district" required>
                                                            <option value="">--জেলা--</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="form-group publish_post">
                                                    <select class="form-control" id="thana" name="thana" required>
                                                        <option value="">--উপজেলা--</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>               
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  $("#division").on('change',function(e){
    e.preventDefault();
    var ddlDistrict=$("#district");
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type:'POST',
      url: "{{url('/district-by-division')}}",
      data:{_token:$('input[name=_token]').val(),division:$(this).val()},
      success:function(response){
          // var jsonData=JSON.parse(response);
          $('option', ddlDistrict).remove();
          $('#district').append('<option value="">--Select District--</option>');
          $.each(response, function(){
            $('<option/>', {
              'value': this.id,
              'text': this.bn_name
            }).appendTo('#district');
          });
        }

    });
  });

  $("#district").on('change',function(e){
    e.preventDefault();
    var ddlthana=$("#thana");
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      type:'POST',
      url: "{{url('/thana-by-district')}}",
      data:{_token:$('input[name=_token]').val(),districts:$(this).val()},
      success:function(response){
          // var jsonData=JSON.parse(response);
          $('option', ddlthana).remove();
          $('#thana').append('<option value="">--Select Thana--</option>');
          $.each(response, function(){
            $('<option/>', {
              'value': this.id,
              'text': this.bn_name
            }).appendTo('#thana');
          });
        }
      });
  });

</script>