if you are creating a web app in Laravel. And in that, you have some forms, which need to use dependent dropdown. then what do you do?
In this tutorial, you will learn how to create a ajax category & subcategories dynamic dependent dropdown in Laravel 10 web apps.
Laravel 10 Ajax Dynamic Dependent Dropdown Example
By following these steps, you can create dynamic dependent dropdown using jQuery ajax in laravel apps:
- Step 1 – Create New Laravel 10 Project
- Step 2 – Setup Database with Laravel Project
- Step 3 – Create Migration and Model File
- Step 4 – Add Routes
- Step 5 – Create Controllers By Artisan
- Step 6 – Create Blade Views
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Create New Laravel 10 Project
Firstly, Open your terminal or command prompt.
Then execute the following command on the terminal to download or install Laravel 10 fresh new setup:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Setup Database with Laravel Project
In this step, visit your laravel app root directory and find the .env file.
Then configure database details in the .evn file, like the following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_Password
Step 3 – Create Migration and Model File
In this step, create category table migration and create category Modal by using the following command:
php artisan make:model Category -m
After that, you need to visit the database/migrations/ directory and then open the create_categorys_table.php file. And add the following code into this file:
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->unsignedInteger('parent_id')->nullable();
$table->timestamps();
});
}
Now run the following command on the terminal to create tables on database:
php artisan migrate
Then visit the app/Models directory and open the Category.php model file. And then add the following code into it:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use HasFactory;
public function subcategories(){
return $this->hasMany('App\Models\Category', 'parent_id');
}
}
Step 4 – Add Routes
Now, Visit to routes directory and open “/web.php” file. Then add the following routes to your web.php file:
use App\Http\Controllers\CategoryController;
Route::get('cat', [CategoryController::class, 'index']);
Route::post('subcat', [CategoryController::class, 'subCat']);
Step 5 – Create Controllers by Artisan
In this step, you need to create a controller file. So execute the following command on the terminal to create a controller file that named CategoryController:
php artisan make:controller CategoryController
This command will create CategoryController by the artisan command.
Then visit to app/http/controller directory and open CategoryController.php. Then update the following methods into your controller file:
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
{
public function index(Request $request)
{
$categoris = Category::where('parent_id',0)->get();
return view('category',["categoris" => $categoris]);
}
public function subCat(Request $request)
{
$parent_id = $request->cat_id;
$subcategories = Category::where('id',$parent_id)
->with('subcategories')
->get();
return response()->json([
'subcategories' => $subcategories
]);
}
}
Step 6 – Create Blade Views
In this step, create one blade views file for rendering data on it. So navigate to resources/views folder and create the blade view as following:
Create file name category.blade.php and update the following code into it:
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 10 jquery ajax categories and subcategories, select dropdown</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container" style="margin-top: 50px; margin-left: 300px">
<div class="row">
<div class="col-lg-6">
<form action="">
<h4>Category</h4>
<select class="browser-default custom-select" name="category" id="category">
<option selected>Select category</option>
@foreach ($categoris as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
<h4>Subcategory</h4>
<select class="browser-default custom-select" name="subcategory" id="subcategory">
</select>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function () {
$('#category').on('change',function(e) {
var cat_id = e.target.value;
$.ajax({
url:"{{ route('subcat') }}",
type:"POST",
data: {
cat_id: cat_id
},
success:function (data) {
$('#subcategory').empty();
$.each(data.subcategories[0].subcategories,function(index,subcategory){
$('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');
})
}
})
});
});
</script>
</body>
</html>
Step 7 – Run Development Server
In this step, Execute the following php artisan serve command to start your server locally:
php artisan serve
Step 8 – Test This App
Now, open browser and hit the following url on it for test this app:
http://localhost:8000/cat
Conclusion
In this tutorial, you have learned how to create dynamic dependent dropdown using Ajax in Laravel 10 app.
