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
Read Also:  Ajax Dynamic Dependent Dropdown using Laravel Example

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('/', '[email protected]');
Route::get('students/get/{id}', '[email protected]');

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:  AngularJS populate Dynamic Dependent dropdown in PHP

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to check Laravel version and configuration
  2. Read Also:  php search engine script for mysql database
  3. Read Also:  Angular 6 Send Email Example Tutorial From Scratch
  4. Read Also:  Module Controller using Angular Example
  5. Read Also:  javascript GET Load data from json file
  6. Read Also:  How to uninstall cordova and ionic in ubuntu
  7. Read Also:  Laravel Send Multiple Emails from on process
  8. Read Also:  Bootstrap Modal popup multiple File Upload using AJAX
  9. Read Also:  Laravel Dependent Dropdown Example Tutorial From Scratch
  10. Read Also:  ng-blur Event using Angular Example
CLOSEX