Laravel 5+, Chained AJAX Select Elements

Every junior developer will come across the task of chaining select elements where the select options of one element depend on the selection of another select element.

In this post I will show you how I did it. Don’t worry it’s not too hard.

So my goal was to provide the user model with country and city properties and I also wanted to be able to add countries and cities within the admin area of the app.

To do this I needed 3 models. User, Country, City.

After generating these three with “php artisan make:model ModelNameI needed to create relationships between the 3 models.

The relationship logic is as follows:

  • User belongs to country
  • User belongs to city
  • City belongs to country

This is done like this…

The user model:
public function country() {
return $this->belongsTo(‘App\Country’);
}
 
public function city() {
return $this->belongsTo(‘App\City’);
}

The country model:

public function user() {
return $this->hasMany(‘App\User’);
}

public function city() {
return $this->hasMany(‘App\City’);
}

The city modeal:

public function country() {
return $this->belongsTo(‘App\Country’);
}

public function user() {
return $this->hasMany(‘App\User’);
}

That’s it for the relationships except the database tables…

I will assume you already have your user model setup and its corresponding database table so now you have to add 2 additional fields for country and city the user belongs to.

If you use the laravel migrations you can add the fields by creating a new migration using “php artisan make:migration –table=users add_city_country_fields

Now to the countries table “php artisan make:migration –create=countries add_countries_table

And the cities table “php artisan make:migration –create=cities add_countries_table

Now we come to the views and route files. I am not going to discuss how to make the add and editing views for countries and cities. If you have troubles with that you can write a comment.

I am going to show how I solved the chained country and city for the user.

The user controller…

So we only pass the countries to the view. We will pull the the cities via ajax based on the country selection.

The user create view…

The ajax script part…

And the route this script is calling…

Believe it or not this is it, event though it looks complicated, it really isn’t just follow the the steps and you will be good to go.

Suggestions and questions are always welcome, so go ahead and use the comment section.

Published by

Adnan Mujkanovic

I am a very curious character and most of all I am into Web development, Economics, Psychology, Philosophy and Logic.

4 thoughts on “Laravel 5+, Chained AJAX Select Elements”

  1. My starter laravel … can help explain in detail related to the above article ? I do not understand about cities.json … cities.json it is located where ? and the script look like?.

    I have a table structure
    country tables :
    id
    name

    table city
    id
    country_id
    name

    1. The cities.json is a route:
      Route::get(‘countries/{code}/cities.json’, function($code)
      {
      return \App\City::where(‘country_id’, $code)->get();
      });

      The table structure should look like this:
      table countries
      id
      name

      table cities:
      id
      name
      country_id

      table users:
      id

      city_id
      country_id

      username
      etc.

  2. help me to make more chained…
    ex :
    -countries : id, contry
    -cities : id, country_id, City
    -subcities : id, city_id, subcity
    -secondsub : id, subcity_id, secondsub

    how to make a chain?

    thank

Leave a Reply

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