Laravel Dependent Dropdown Tutorial With Example

Hello Web developers I will show you how to do Laravel Dependent Dropdown Tutorial With Example. We will get the second drop-down item based on the first selected drop-down. When we select the first dropdown’s item, it will fire an AJAX request to the Laravel server and in return, we get a response and we need to append that response to the second dropdown. So it is called a dependent dropdown.

How to Install Laravel Project

Establish Laravel Project by the typing following command.

composer create-project --prefer-dist laravel/laravel laraveldropdown

Read our Dependent dropdown in ReactJS : Dropdown in React JS

Download Project from here : Dropdown in Laravel

This is our database design

First make Routes for our project ( web.php )



Route::resource('/dropdown', 'DropdownController');

Route::get('/getCity/{id}', 'DropdownController@getCity'); // for get city list

Route::get('/getStadiumDetail/{id}', 'DropdownController@getStadiumDetail'); // for get city list

Now We will start code here . Make one controller DropdownController.php.

DropdownController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Redirect,Response;

class DropdownController extends Controller
{
    function index()
    {
        $data['states'] = DB::table('states')->get();

        return view("dropdown",$data);
    }
    function getCity()
    {
        $id = $_GET['myID'];
        $res = DB::table('states')
        ->join('city','states.id','=','city.state_id')
        ->where('states.id', $id)
        ->get();
        return Response::json($res);

    }
    function getStadiumDetail()
    {
        $id = $_GET['id'];
         $res = DB::table('city')
        ->join('stadium','city.id','=','stadium.city_id')
        ->join('address','city.id','=','address.city_id')
        ->join('details','city.id','=','details.stadium_id')
        ->where('city.id', $id)
        ->get();
        return Response::json($res);
    }
}

Now make a view file for front-end Dropdown.php.

Dropdown.php


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3 class="text-center mt-4 text-secondary">Banking Type Dependent Dropdown</h3>
  <div class="row mt-5">

    <div class="col-sm-2">
      <h5 class="text-info mb-4">Choose State List</h5>
      <select name="" id="state" class="form-control">
        <option><h1>Select State</h1></option>
         @foreach($states as $row)
            <option value={{$row->id}}>{{$row->state_name}}</option>
         @endforeach   
      </select>
    </div>
 
    <div class="col-sm-3">
        <h5 class="text-info  mb-4"> City List</h5>
        <select  id="city" class="form-control" disabled >
          <option>City List</option>
       </select>
    </div>
    <div class="col-sm-3">
        <h5 class="text-info  mb-4">Stadiums List</h5>
        <select  id="stadium" class="form-control" disabled>
       </select>
    </div>
    <div class="col-sm-4">
        <h5 class="text-info  mb-4">Stadiums Address</h5>
        <select id="address" class="form-control" disabled>
       </select>
    </div>
    <div class="col-sm-4 offset-sm-4 mt-4">
        <h5 class="text-info  mb-4">Stadium Details</h5>
        <textarea id="details"  cols="30" class="p-4" disabled></textarea>
    </div>
  </div>
</div>

</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    // Get City List 
    
      $(document).ready(function(){
        $('#state').change(function(){
           var state = $('#state').val();
           $('#city').html('');
            $.ajax({
              url:'getCity/{id}',
              type:'GET',
              data:{myID:state},
              dataType: "json",
              success:function(data)
              {
               
                $.each(data, function(key, city)
                 {     
                  // alert(city.city_name)
                  $('#city').prop('disabled', false).css('background','aliceblue').append('<option value="'+city.id+'">'+city.city_name+'</option>');
                });
              }
          });
        });
      });
    
      // Get STADIUM and ADDRESS by CITY
    
      $(document).ready(function(){
        $('#city').change(function(){
           var city = $('#city').val();
           $.ajax({
              url:'getStadiumDetail/{id}',
              type:'GET',
              data:{id:city},
              dataType: "json",
              success:function(data)
              {
                $.each(data, function(key, city)
                 {     
                  $('#stadium').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_name+'</option>');
                  $('#address').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_add+'</option>');
                  $('#details').prop('disabled', false).css('background','aliceblue').html(city.stadium_details);
                });
              }
          });
        });
      });
    </script>

Now run this project in broswer .

Read our more tutorials

Building a Simple CRUD App with Node, Express, and MongoDB

Image preview and upload using PHP

Bootstrap Collapsing Sidebar Menu

Comments 1

Leave a Reply Cancel reply