Laravel 5.6 Dependent Dynamic dropdown Example Tutorial

Today, We want to share with you Laravel 5.6 Dependent Dynamic dropdown Example Tutorial From Scratch.In this post we will show you Creating Dynamic Dropdown in Laravel 5.6, hear for Dependent Select Box for Laravel 5.6 Beginners we will give you demo and example for implement.In this post, we will learn about php – Laravel 5.6 dynamic dropdown country and state with an example.

Laravel 5.6 Dependent Dynamic dropdown Example Tutorial From Scratch

There are the Following The simple About Laravel 5.6 Dependent Dynamic dropdown Example Tutorial From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop php – Laravel 5.6 dynamic dropdown country and state, so the some major files and Directory structures for this example is following below.

  • Create Mysql Table
  • Laravel Route
  • Laravel Controller
  • Laravel view
  • Custom JavaScript

Step 1: Make Tables (Teachers and Student)

using Laravel migrations

php artisan make:migration create_teacher_student_tables

Database/migration file : up Functions

 public function up()
    {
        Schema::create('teacher', function(Blueprint $table){
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });

        Schema::create('student', function(Blueprint $table){

            $table->increments('id');
            $table->integer('teacher_id');
            $table->string('name');
            $table->timestamps();
        });
    }
php artisan migrate

Insert dummy Data

INSERT INTO `teacher` (`id`, `name`, `created_at`, `updated_at`) VALUES
(1, 'Jaydeep', '2019-09-02 02:18:05', '2019-09-16 04:18:10'),
(2, 'Krunal', '2019-09-05 04:41:25', '2019-05-12 12:30:14');

and

INSERT INTO `student` (`id`, `teacher_id`, `name`, `created_at`, `updated_at`) VALUES
(1, 1, 'Ankit', '2019-04-10 07:16:44', '2019-09-19 12:18:28'),
(2, 1, 'Dhaval', '2019-09-14 07:14:27', '2019-09-07 09:40:12'),
(3, 2, 'Mayur', '2019-09-08 11:35:34', '2019-09-20 09:15:26'),
(4, 2, 'Chirag', '2019-09-07 08:14:35', '2019-09-07 09:26:26');

Step 2 : Include Laravel Route

\route\web.php

Route::get('/', 'SchoolController@index');
Route::get('students/get/{id}', 'SchoolController@getStudents');

Step 3: Add Laravel 5.6 controller

Simple Create a Laravel Controller

php artisan make:controller SchoolController

app\http\Controllers\SchoolController.php

pluck("name","id");
        return view('home',compact('teachers'));
    }

     public function getStudents($id) {
        $students = DB::table("student")->where("teacher_id",$id)->pluck("name","id");

        return json_encode($students);

    }

}

Step 4: Make Simple Home Blade Files

\resources\views\home.blade.php



    How To Create Dependent Drop down in Laravel 5.6
    
    
   


    

How To Create Dependent Drop down in Laravel(Teacher & Student)

{{ csrf_field() }}

Step 5 : Create Custom JavaScript Files.

\public\js\custom.js

 $(document).ready(function() {

    $('select[name="teacher"]').on('change', function(){
        var teacherId = $(this).val();
        if(teacherId) {
            $.ajax({
                url: '/students/get/'+teacherId,
                type:"GET",
                dataType:"json",
                beforeSend: function(){
                    $('#live_loading').css("visibility", "visible");
                },

                success:function(data) {

                    $('select[name="student"]').empty();

                    $.each(data, function(key, value){

                        $('select[name="student"]').append('');

                    });
                },
                complete: function(){
                    $('#live_loading').css("visibility", "hidden");
                }
            });
        } else {
            $('select[name="student"]').empty();
        }

    });

});
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel 5.6 Dependent Dynamic dropdown Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Comment