Dependency dropdown select country location Bangladesh-Laravel

Dependency dropdown selection by using laravel. Here we use Bangladeshi database for making dependency dropdown. To making this you must have organize data or sql file we will provide you sql file to completing dependency select country location. 

#1st: Create dependency table

Divisions.sql

Discticts.sql

Upazial.sql

PostOffice.sql

#2. Create 4 Model with relation

#District.php
class District extends Model
{
    protected $table = 'districts';
    public function division (){
        return $this->hasMany(Division::class,'DivisionId');
    }
}
#Division.php
class Division extends Model
{
    protected $table = 'divisions';
    public function district()
    {
        return $this->hasMany(District::class,'division_id');
    }
}
#Upazila.php
class Upazila extends Model
{
    protected $table = 'upazilas';
}
#Postoffice.php
class Postoffice extends Model
{
    protected $table = 'postoffices';
}

#3. Create route using any control in your project

Route::get('myform/ajax/{id}',array('as'=>'myform.ajax','uses'=>'EducationlevelController@myformAjax'));
Route::get('myform/ajax/upazila/{id}',array('as'=>'myform.ajax','uses'=>'EducationlevelController@upazila'));
Route::get('myform/ajax/postoffice/{id}',array('as'=>'myform.ajax','uses'=>'EducationlevelController@postoffice'));

#4.Using in controller: EducationlevelController.php

    public function myformAjax($DivisionId)
    {
        $id=Division::select('id')->where("name", $DivisionId)->first();
        $citys = District::where('DivisionId',$id['id'])->pluck("name","id");
        return json_encode($citys);
    }
    public function upazila($DistrictId)
    {
        $id=District::select('id')->where("name", $DistrictId)->first();
        $citys = Upazila::where('DistrictId',$id['id'])->pluck("name","id");
        return json_encode($citys);
    }
    public function postoffice($upazila_id)
    {
        $citys=Postoffice::where("name", $upazila_id)->pluck("code","id");
        return json_encode($citys);
    }

#5. Write ajax jquery in your project blade file

    <script type="text/javascript">
        $(document).ready(function() {
            $('select[name="Division"]').on('change', function() {
                var DivisionId = $(this).val();
                if(DivisionId) {
                    $.ajax({
                        url: '/myform/ajax/'+DivisionId,
                        type: "GET",
                        dataType: "json",
                        success:function(data){
                            console.log(data);
                            $('select[name="District"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="District"]').append('<option value="'+ value +'">'+ value +'</option>');
                            });
                        }
                    });
                }else{
                    $('select[name="District"]').empty();
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('select[name="District"]').on('change', function() {
                var districtsId = $(this).val();
                if(districtsId) {
                    $.ajax({
                        url: '/myform/ajax/upazila/'+districtsId,
                        type: "GET",
                        dataType: "json",
                        success:function(data) {
                            console.log(data);
                            $('select[name="Upazila"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="Upazila"]').append('<option value="'+ value +'">'+ value +'</option>');
                            });
                        }
                    });
                }else{
                    $('select[name="Upazila"]').empty();
                }
            });
        });
    </script>
   <script type="text/javascript">
        $(document).ready(function() {
            $('select[name="Upazila"]').on('change', function() {
                var upazila_id = $(this).val();
                if(upazila_id) {
                    $.ajax({
                        url: '/myform/ajax/postoffice/'+upazila_id,
                        type: "GET",
                        dataType: "json",
                        success:function(data) {
                            console.log(data);
                            $('select[name="PostOffice"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="PostOffice"]').append('<option value="'+ value +'">'+ value +'</option>');
                            });
                        }
                    });
                }else{
                    $('select[name="PostOffice"]').empty();
                }
            });
        });
    </script>

6. Use same name and id in select dropdown option 

<div class="row form-group">
	<label for="inputName" class="col-sm-3 control-label">Division *</label>
	<div class="col-sm-7">
		<select class="form-control" name="Division" id="division">
			<option>DIVISION</option>
			@php $division =\App\Division::all(); @endphp
			@foreach($division as $row)
				<option value="{{$row->name}}">{{$row->name}}</option>
			@endforeach
		</select>
	</div>
</div>
<div class="row form-group">
	<label for="inputName" class="col-sm-3 control-label">District *</label>
	<div class="col-sm-7">
		<select name="District" id="districtss" class="form-control opt-select">
			<option>districtss</option>
		</select>
	</div>
</div>
<div class="row form-group">
	<label for="inputName" class="col-sm-3 control-label">Upazila *</label>
	<div class="col-sm-7">
		<select name="Upazila" id="upazila" class="form-control opt-select">
			<option> Upazila </option>
		</select>
	</div>
</div>
<div class="row form-group">
	<label for="inputName" class="col-sm-3 control-label">PostOffice *</label>
	<div class="col-sm-7">
		<select name="PostOffice" id="PostOffice" class="form-control opt-select">
			<option> Post Office </option>
		</select>
	</div>
</div>		

Download Mysql data table: click here

 /*=======End Dependency Dropdown select=========*/