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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\DB;

class SchoolController extends Controller
{
    public function index()

    {
        $teachers = DB::table('teacher')->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

<html>
<head>
    <title>How To Create Dependent Drop down in Laravel 5.6</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <style>
   #live_loading{
   visibility:hidden;
   }
   </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-success">
                    <div class="panel-heading"><h2>How To Create Dependent Drop down in Laravel(Teacher & Student)</h2></div>

                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="POST" action="">
                            {{ csrf_field() }}
                            <div class="form-group-sm">

                                <div class="col-md-6">
                                    <select name="teacher" class="form-control">
                                        <option value="">--Select Teacher--</option>
                                        @foreach ($teachers as $teacher => $value)
                                        <option value="{{ $teacher }}"> {{ $value }}</option>   
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <select name="student" class="form-control">
                                     <option>--Student--</option>

                                 </select>
                             </div><div class="col-md-2"><span id="live_loading"><i class="fa fa-spinner fa-3x fa-spin"></i></span></div>

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

                 <div class="panel-footer">- By: [Jaydeep Gondaliya]</div>
             </div>
         </div>
     </div>
 </div>
 <script src="{{ asset('js/app.js') }}"></script>
 <script src="{{ asset('js/custom.js') }}"></script>
</body>
</html>

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('<option value="'+ key +'">' + value + '</option>');

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

    });

});

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  How to get the browser viewport height and width dimensions?

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.