Laravel Dynamic Dependent Select Box using jQuery Ajax

In this example we learn Laravel dynamic dependent select box using jQuery Ajax. We will explain step by step dynamic dependent select box in laravel. In this post you learn laravel dynamic dependent select box using jquery ajax.

Some you have need laravel dynamic dependent select box. In this example i will show laravel dynamic dependent country state city select box using jquery ajax.

Laravel dynamic dependent select box using ajax

Countries Table:

CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) CHARACTER SET utf8 NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

States Table:

CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Cities Table:

CREATE TABLE `cities` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `state_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

routes.php

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;


Route::get('', [UserController::class,'index']);
Route::get('get_state', [UserController::class,'get_state'])->name('get_state');
Route::get('get_city', [UserController::class,'get_city'])->name('get_city');
create UserController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\DB;

class UserController extends Controller
{
    function index(){
        $countries = DB::table('countries')->get();

        return view('users',compact('countries'));
    }

    function get_state(Request $request){
        $states = DB::table('states')->whereCountryId($request->country_id)->get();
        return response()->json($states);
    }

    function get_city(Request $request){
        $cities = DB::table('cities')->whereStateId($request->state_id)->get();
        return response()->json($cities);
    }
}

user.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Dependent Select Box using jQuery Ajax Laravel</h2>
  <form>
    <div class="form-group">
      <label for="country">Country:</label>
      <select name="country" id="country" class="form-control">
          <option value="">Select Country</option>
          @foreach ($countries as $country)
              <option value="{{$country->country_id}}">{{$country->country_name}}</option>
          @endforeach
      </select>
    </div>

    <div class="form-group">
      <label for="state">State:</label>
      <select name="state" id="state" class="form-control"></select>
    </div>

    <div class="form-group">
      <label for="city">City:</label>
      <select name="city" id="city" class="form-control"></select>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

<script>
    $(document).ready(function () {
        $("#country").change(function(){
            var countryID = $(this).val();
            if(countryID){
                $.ajax({
                    type:'GET',
                    url:'{{ route("get_state") }}',
                    data:{"country_id" : countryID },
                    success:function(res){
                        $("#state").empty();
                        $("#state").append('<option>Select State</option>');
                        $.each(res,function(key,value){
                            $("#state").append('<option value="'+value.state_id+'">'+value.state_name+'</option>');
                        });
                    }
                }); 
            }
        });

        $('#state').on('change',function(){
            var stateID = $(this).val();  
            if(stateID){
                $.ajax({
                    type:"GET",
                    url:"{{ route('get_city') }}",
                    data : { "state_id" : stateID },
                    success:function(res){        
                        if(res){
                            $("#city").empty();
                            $("#city").append('<option>Select City</option>');
                            $.each(res,function(key,value){
                                $("#city").append('<option value="'+key.city_id+'">'+value.city_name+'</option>');
                            });
                        }
                    }
                });
            }
        });
    });
</script>
</body>
</html>

I hope you understand of laravel dynamic dependent select box using jquery ajax and it can help you..

Read Also :  Laravel Blade Include File Example