Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

JackD's avatar

i just followed your posted code

RomainLanz's avatar

Ok, lets resume your question.

Problem
You need to have a select who depends on other select.

What you need to do
First, you need to register a GET route who return cities from a country_id.
Next, you need to write some JavaScript code to send an AJAX request when the country select change to fetch all cities related to this country.
Finaly, you need to replace the option on the cities select with your new cities.

JackD's avatar

@AtoZ yeah but it should be return cities from a countryCODE

RomainLanz's avatar

@dinis Yes, it's not a problem, ID or Slug or CODE. It's just the same, only one line change.

JackD's avatar

@AtoZ im lost here i dont know what to start it all the code over again

RomainLanz's avatar

Ok, lets review this together.

Assuming that you have a Country and City model.

City::where('country_id', $country_id)->get();      // Returns all cities related to country_id
City::where('country_code', $country_code)->get();  // Returns all cities related to country_code

Where are you lost with that?

JackD's avatar

the next thing that i should do

RomainLanz's avatar

I need to go right now, I'll come back in 10 minutes and I'll write a complete answer with all steps.

I just need to know your database schema.

1 like
RomainLanz's avatar
Level 14

So...

Here's is your view.

<form>

    ...
    
    <div class="form-group">
        <lablel for="country_id">Select Country:</lablel>
        <select name="country_id" id="country" class="form-control">
            @foreach($countries as $country )
                <option value="{{ $country->countryCODE }}">{{ $country->countryNAME }}</option>
            @endforeach
        </select>
    </div>



    <div class="form-group">
        <lablel for="state">Select State:</lablel>
        <select name="state" id="state" class="form-control"></select>
    </div>

</form>

Now, you need to observe country_id select with some JavaScript and send an AJAX request. I'll use jQuery for my example.

$('#country_id').change(function()
{
    $.get('/countries/' + this.value + '/cities.json', function(cities)
    {
        var $state = $('#state');

        $state.find('option').remove().end();

        $.each(cities, function(index, city) {
            $state.append('<option value="' + city.id + '">' + city.name + '</option>');
        });
    });
});

Now, on your routes file you need to write something like...

get('countries/{code}/cities.json', function($code)
{
    return City::where('country_code', $code)->get();
});
1 like
RomainLanz's avatar

What's your problem now? Can I see your error?

You must not copy/paste my code, it needs some change.

JackD's avatar

there's no error but when i select country no city is shown

RomainLanz's avatar

Can you open your browser dev tools and see any JavaScript errors?

And also see the AJAX request and look at the response given.

RomainLanz's avatar

Did you adapt my code to correspond to your application? (change model name, database column, ...)

JackD's avatar

here is my model City and Country, my database table are City and Country, my City column are id, cityCOUNTRYCODE, cityNAME, my Country column id, countryCODE, countryNAME

RomainLanz's avatar

So on the routes file you need to write

get('countries/{code}/cities.json', function($code)
{
    return City::where('cityCOUNTRYCODE', $code)->get();
});

Care about namespace for your model!

JackD's avatar

yes i did that too

here is my view

 ` {!! Form::open() !!}
                    <div class="form-group">
                        <lablel for="country_id">Select Country:</lablel>
                        <select name="country_id" id="country_id" class="form-control">
                            @foreach($countries as $country )
                                <option value="{{ $country->countryCODE }}">{{ $country->countryNAME }}</option>
                            @endforeach
                        </select>
                    </div>



                    <div class="form-group">
                        <lablel for="state">Select State:</lablel>
                        <select name="state" id="state" class="form-control"></select>
                    </div>
                    {!! Form::close()!!}

here is script

  $(document).ready(function($){
      $('#country_id').change(function()
      {
          $.get('/countries/' + this.value + '/cities.json', function(cities)
          {
              var $state = $('#state');
              // Clear state select
              $state.find('option').remove().end();

              $(cities).each(function(city) {
                  $state.append('<option value="' + city.id + '">' + city.name + '</option>');
              });
          });
      });
    });
</script>}
RomainLanz's avatar

Did you correctly import the model on your route file?

JackD's avatar

what do you mean import model on route?

JackD's avatar

here is my route

` get('countries/{code}/cities.json', function($code) { return City::where('cityCOUNTRYCODE', $code)->get(); });

RomainLanz's avatar

Your model is namespaced on Laravel 5.

You need to import it or to write the FQDN like bellow

get('countries/{code}/cities.json', function($code)
{
    return App\City::where('cityCOUNTRYCODE', $code)->get();
});
JackD's avatar

after i did that i got undefined list in my cities after selecting country

RomainLanz's avatar

Ok, now we have another problem. When you look at the response of the AJAX request, do you have some data or it's a blank json?

JackD's avatar

when i try to manualy open http://project.dev/countries/PHL/cities.json i got some data like this

`[{"cityID":2679,"cityCOUNTRYCODE":"PHL","cityNAME":"Abra"},{"cityID":2680,"cityCOUNTRYCODE":"PHL","cityNAME":"Agusan del Norte"},{"cityID":2681,"cityCOUNTRYCODE":"PHL","cityNAME":"Agusan del Sur"},{"cityID":2682,"cityCOUNTRYCODE":"PHL","cityNAME":"Aklan"},{"cityID":2683,"cityCOUNTRYCODE":"PHL","cityNAME":"Albay"},{"cityID":2684,"cityCOUNTRYCODE":"PHL","cityNAME":"Angeles"},{"cityID":2685,"cityCOUNTRYCODE":"PHL","cityNAME":"Antique"},{"cityID":2686,"cityCOUNTRYCODE":"PHL","cityNAME":"Aurora"},

Please or to participate in this conversation.