Laravel dynamic dropdown country and state

£可爱£侵袭症+ 提交于 2019-11-28 23:46:42

Here's how to do a dynamic dropdown in Laravel:

You can see a demo of how it works here https://www.dronejobs.co/

Disclaimer: I didn't test this but it should work. Feel free to comment and I'll update 🙏

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use App\{Country, State};

class HomeController extends Controller
{
    public function index()
    {
        return view('home', [
            'countries' => Country::all(),
            'states' => State::all(),
        ]);
    }
}

resources/views/home.blade.php

<select name="country">
    @foreach ($countries as $country)
        <option value="{{ $country->id }}">{{ $country->name }}</option>
    @endforeach
</select>

<select name=“state”>
    @foreach ($states as $state)
        <option value="{{ $state->id }}">{{ $state->name }}</option>
    @endforeach
</select>

<script>
    $(function() {
        $('select[name=country]').change(function() {

            var url = '{{ url('country') }}' + $(this).val() + '/states/';

            $.get(url, function(data) {
                var select = $('form select[name= state]');

                select.empty();

                $.each(data,function(key, value) {
                    select.append('<option value=' + value.id + '>' + value.name + '</option>');
                });
            });
        });
    });
</script>

app/Country.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Country extends Model
{   
    public function states()
    {
        return $this->hasMany('App\State');
    }

app/State.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

Class State extends Model
{   
    public function country()
    {
        return $this->belongsTo('App\Country');
    }

routes/web.php

Route::get('country/{country}/states', 'CountryController@getStates');

app/Http/Controllers/CountryController.php

<?php

namespace App\Http\Controllers;

use App\Country;

class CountryController extends Controller
{
    public function getStates(Country $country)
    {
        return $country->states()->select('id', 'name')->get();
    }
}

I would like to update this post, I have already solved my problem. I just want to share this solutions for the community :)

I just added some ajax codes for this in my user_register.blade.php:

    <div class="form-group">
        <label for="title">Select Country:</label>
        <select name="country" class="form-control">
            <option value="">--- Select country ---</option>
            @foreach ($countries as $key => $value)
                <option value="{{ $value }}">{{ $value }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="title">Select state:</label>
        <select name="state" class="form-control">
        </select>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('select[name="country"]').on('change', function() {
        var countryID = $(this).val();
            if(countryID) {
            $.ajax({
                url: '/admin/user_register/ajax/'+encodeURI(countryID),
                type: "GET",
                dataType: "json",
                success:function(data) {
                $('select[name="state"]').empty();
                $.each(data, function(key, value) {
                    $('select[name="state"]').append('<option value="'+ value +'">'+ value +'</option>');
                    });
                }
            });
            }else{
            $('select[name="state"]').empty();
              }
           });
        });
    </script>

Which I specified where to get the data based on country ID and will pass to my routes.php:

url: '/admin/user_register/ajax/'+encodeURI(countryID),

In my routes.php:

    //dynamic dropdown country and states
Route::get('/admin/user_register/ajax/{country_id}',array('as'=>'user_register.ajax','uses'=>'AdminController@stateForCountryAjax'));

Last I added some codes in my AdminController.php what to do:

public function stateForCountryAjax($country_name)
{
    $country_name = urldecode($country_name);
    $country_id = $this->_stateCountryIDForCountryName($country_name);
    $states = DB::table("states")
                ->where("country_id",$country_id)
                ->lists('name','id');
    return json_encode($states);
}

private function _stateCountryIDForCountryName($country_name)
{
    return DB::table('countries')->where("name","$country_name")->first()->country_id;
}

This method works for me. I was able now to dynamically update dropdown option (states) based on Country ID.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!