demo

ROUTE
use App\Http\Controllers\DropdownController;
Route::get('/index', [DropdownController::class, 'index']);
Route::post('api/fetch-states', [DropdownController::class, 'fetchState']);
Route::post('api/fetch-cities', [DropdownController::class, 'fetchCity']);
          
CONTROLLER
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;
use App\Models\City;
class DropdownController extends Controller
{
    public function index(){
        $data['countries'] = Country::get();
        return view('dropdown', $data);
    }
    public function fetchState(Request $request){
        $data['states'] = State::where("country_id", $request->country_id)->get();
        return response()->json($data);
    }
    public function fetchCity(Request $request){
        $data['cities'] = City::where("state_id", $request->state_id)->get();                   
        return response()->json($data);
    }
}

BLADE FILE
                <form>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-group mb-3">
                                <label for="">Country :</label>

<select  id="country-dropdown" class="form-control">
                                    <option value="" hidden>Choose</option>
                                    @foreach ($countries as $country)
                                    <option value="{{$country->id}}">{{$country->name}}</option>
                                    @endforeach
                                </select>

</div>
                        </div>
                        <div class="col-4">
                            <div class="form-group mb-3">
                                <label for="">Division :</label>

</div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="">District :</label>

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

</form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#country-dropdown').on('change', function () {
                var idCountry = this.value;
                $("#state-dropdown").html('');

$.ajax({
                    url: "{{url('api/fetch-states')}}",
                    type: "POST",
                    data: {
                        country_id: idCountry,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',

success: function (result) {
                        $('#state-dropdown').html('<option value="" hidden>Choose</option>');
                        $.each(result.states, function (key, value) {
                            $("#state-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                        $('#city-dropdown').html('<option value="">Choose</option>');
                    }

});

$('#state-dropdown').on('change', function () {
                var idState = this.value;
                $("#city-dropdown").html('');

$.ajax({
                    url: "{{url('api/fetch-cities')}}",
                    type: "POST",
                    data: {
                        state_id: idState,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',

success: function (res) {
                        $('#city-dropdown').html('<option value="" hidden>Choose</option>');
                        $.each(res.cities, function (key, value) {
                            $("#city-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }

});

});
  
        });
    </script>

(2)-----------------------------------------------------------------------------------------------------------------------------
ROUTE
Route::get('/', [WelcomeController::class, 'index']);
Route::post('/fetch_sub_categories', [WelcomeController::class, 'fetch_sub_categories']);

CONTROLLER
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use App\Models\SubCategory;
use Illuminate\Http\Request;
class WelcomeController extends Controller
{
    public function index(){                                                                  
        $data['categories'] = Category::get();                                                     
        return view('welcome',$data);
    } 
    public function fetch_sub_categories(Request $request){
        $data['sub_categories'] = SubCategory::where("category_id", $request->category_id)->get();
        return response()->json($data);
    }
}

BLADE
<div class="col-4">
    <select id="dropdown-one" class="form-select mt-2">
        <option hidden value="">Choose</option>
        @foreach($categories as $data)
        <option value="{{$data->id}}">{{$data->name}}</option>
        @endforeach
    </select>
</div>
<div class="col-4">
    <select id="dropdown-two" class="form-select mt-2"></select>
</div>

(3)-----------------------------------------------------------------------------------------------------------------------------
ROUTE
Route::get('/', [WelcomeController::class, 'index']);
Route::post('api/fetch-one', [WelcomeController::class, 'fetchOne']);

CONTROLLER
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use App\Models\SubCategory;
use Illuminate\Http\Request;
class WelcomeController extends Controller
{
    public function index(){                                                                  
        $data['categories'] = Category::get();                                                     
        return view('welcome',$data);
    } 
    public function fetchOne(Request $request){
        $data['sub_categories'] = SubCategory::where("category_id", $request->category_id)->get();
        return response()->json($data);
    }
}

BLADE
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  </head>
  <body>
    <div class="container py-5">
        <div class="row">
            <div class="col-4">
                <select id="dropdown-one" class="form-select mt-2">
                    <option hidden value="">Choose</option>
                    @foreach($categories as $data)
                    <option value="{{$data->id}}">{{$data->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-4">
                <select id="dropdown-two" class="form-select mt-2"></select>
            </div>
            <div class="col-4">
                <select id="dropdown-three" class="form-select mt-2"></select>
            </div>
        </div>
    </div>

});
        });
    </script>

</body>
</html>