Ajax Dynamic Dependent Dropdown using Laravel Example

Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Today, We want to share with you Ajax Dynamic Dependent Dropdown using Laravel Example.In this post we will show you country state city drop down list using ajax in laravel, hear for Dependent Select Box for Laravel Beginners we will give you demo and example for implement.In this post, we will learn about laravel, jquery ajax categories and subcategories, select dropdown with an example.

Ajax Dynamic Dependent Dropdown using Laravel Example

There are the Following The simple About Ajax Dynamic Dependent Dropdown using Laravel Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop how to show selected value in dropdown in laravel 5.7, so the country state city drop down list in laravel 5.7 for this example is following below.

Read Also:  Top 40 Laravel Interview Questions

Step 1: Create Laravel Model

php artisan make:model Model\MyState 
php artisan make:model Model\MyCity

App/Http/Model/MyState.php

<?php 
namespace App\Model; 
use Illuminate\Database\Eloquent\Model; 
class MyState extends Model 
{ 
	// Your Logic
}

App/Http/Model/MyCity.php

<?php 
namespace App\Model\Demo\live_drop_down; 
use Illuminate\Database\Eloquent\Model; 
class MyCity extends Model 
{ 
	// Your Logic
}

Step 2: Create Laravel Controller

DependentDropdownController.php

    <?php
    namespace App\Http\Controllers\Demo\live_drop_down;
    use App\Http\Controllers\Controller;
    use App\Model\Demo\live_drop_down\MyCity;
    use App\Model\Demo\live_drop_down\MyState;
    use Illuminate\Http\Request;
    class DependentDropdownController extends Controller
    {
        /**
         * Display a listing of the resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function index()
        {
            $name_states = MyState::all();
            return view('demo.live_drop_down.index',compact('name_states'));
        }
        public function destroy($id)
        {
            //
        }
        public function searchYourCity($id)
        {
            $name_city = MyCity::where('name_state_id',$id)->get();
            return response()->json($name_city);
        }
    }

Step 3: Define a Laravel Route

    Route::get('searchYourCity/{id}','Demo\live_drop_down\[email protected]');

Step 4: Make Laravel Blade View

resource/view/dropdown

    @extends('master.app')
    @section('main-content')
    <div class="col-md-8 col-md-offset-2">
      <div class="panel panel-success">
          <div class="panel-heading">
			<h3>How To Create Dependent Drop down in Laravel</h3>
          </div>
          <div class="pakainfo panel-body">
        <form action="{{ route('dynamic-dropdown-laravel.store') }}" method="post">
         {{ csrf_field() }}
         <div class="pakainfo row">
          <div class="pakainfo col-md-6">
           <div class="pakainfo form-group {{ ($errors->has('roll'))?'has-error':'' }}">
            <label for="roll">MyState <span class="required">*</span></label>
            <select name="name_state" class="pakainfo form-control" id="name_state">
             <option value="">-- Select MyState --</option>
             @foreach ($name_states as $name_state)
              <option value="{{ $name_state->id }}">{{ ucfirst($name_state->name_state_name) }}</option>
             @endforeach
            </select>
         </div>
          </div>
          <div class="col-md-6">
           <div class="form-group {{ ($errors->has('name'))?'has-error':'' }}">
            <label for="roll">MyCity </label>
            <select name="name_city" class="form-control" id="name_city">
            </select>
         </div>
          </div>
         </div>
       </form> 
	   <a href="https://www.pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
          </div>
        </div>
    </div>
        
    @endsection

Step 5: Create jQuery Ajax

    @section('script')
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="text/javascript" src="{{ asset('assets/js/jquery-3.3.1.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
     <script>
             $(document).ready(function() {
            $('#name_state').on('change', function() {
                var getStId = $(this).val();
                if(getStId) {
                    $.ajax({
                        url: '/searchYourCity/'+getStId,
                        type: "GET",
                        data : {"_token":"{{ csrf_token() }}"},
                        dataType: "json",
                        success:function(data) {
                            //console.log(data);
                          if(data){
                            $('#name_city').empty();
                            $('#name_city').focus;
                            $('#name_city').append('<option value="">-- Select MyCity --</option>'); 
                            $.each(data, function(key, value){
                            $('select[name="name_city"]').append('<option value="'+ key +'">' + value.name_city_name+ '</option>');
                        });
                      }else{
                        $('#name_city').empty();
                      }
                      }
                    });
                }else{
                  $('#name_city').empty();
                }
            });
        });
        </script>

Angular 6 CRUD Operations Application Tutorials

Related Search: Dependent Select Box for Laravel Beginners, Ajax Dynamic Dependent Dropdown in Laravel, Laravel Dependent Dropdown, dynamic dropdown in laravel, laravel ajax dropdown, laravel, jquery ajax categories and subcategories, select dropdown, select2 dependent dropdown laravel, dependent drop down list using jquery, country state city drop down list in laravel, country state city drop down list using ajax in laravel, how to show selected value in dropdown in laravel 5

Read Also:  Convert character to ASCII code in JavaScript Example

Read :

Summary

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

I hope you get an idea about Ajax Dynamic Dependent Dropdown using Laravel Example.
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.

Read Also:  Polymorphic One to Many Relationship Example

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *