Laravel 8 dynamic dependent dropdown using ajax jquery. In this tutorial, we will guide on how to create dynamic dependent dropdown using jquery ajax in laravel 8 apps.
And as well as will guide on how to show selected subcategories dependent dropdown on selected category dropdown using jquery ajax in laravel 8 app.
This tutorial will guide you step by step to how to implement selected subcategories dropdown based on selected category dropdown using jQuery ajax in laravel 8 apps. And, how to fetch data from database on onchange select category dropdown using jQuery ajax in dropdown list in laravel 8 app.
Dynamic Dependent Dropdown In Laravel 8 Using jQuery Ajax
- Step 1 – Install Laravel 8 App
- Step 2 – Connecting App to Database
- Step 3 – Create Model and Migration
- 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 – Install Laravel 8 App
First of all, Execute the following command on terminal to download or install laravel 8 fresh new setup:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
After that, open “.env” file and update the database name, username, and password in the env file:
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 Modal and Migration
In this step, create category table migration and create category Modal by using the following command:
php artisan make:model Category -m
Navigate database/migrations/ and open create_categorys_table.php file. Then update 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
php artisan migrate
Next, open Category.php model file and update the following code into it, which is placed on app/Models/:
<?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\Category', 'parent_id');
}
}
Step 4 – Add Routes
Next step, Navigate to “routes/web.php” file and add the following routes into 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
Next step, execute the following command on terminal to create controller file that named CategoryController:
php artisan make:controller CategoryController
This command will create CategoryController by the artisan command.
Next, Navigate to app/http/controller 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 first 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 8 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, use 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 8 app.
