Dynamic dependent dropdown select using ajax and jquery

Question

i am trying to make a search with Dynamic dependent dropdown selection, the first box gets all the regions from the database and the second gets the city of the region who i choose. I have a problem with the first box, it doesn't show me the names of the régions.

The form:

<form action="{{route('ghof')}}" method="get"> 
  {{ csrf_field() }}
  <select class="search-field location" name="region" id="region">
    <option selected></option>
    @foreach($vi as  $key => $value)
      <option value="{{$key}}">{{$value}}</option>
    @endforeach
  </select>
  <select type="text" class="search-field location" name="ville" id="ville"></select>
  <button class="search-btn" type="submit" id="search"> Recherche </button>
</form>

The controller:

public function  index() {
    $ville=Vil::orderBy('id','asc')->get()->pluck('region','id');

    return view ('index',[ 'vi'=>$ville,]);
}

public function delegation($id) {
    $delegation = region::where('ville_id',$id)->pluck('region','id');
    return json_encode($delegation);
}

The script:

<script type="text/javascript">
    $(document).ready(function () {
        $('select[name="region"]').on('change', function() {
            var ville_id = $(this).val();
            if (ville_id) {
                $.ajax({
                    url: '/deleg/' + ville_id,
                    type: 'GET' ,
                    dataType: 'json',
                    success: function(data) {
                        $('select[name="ville"]').empty();
                        $.each(data,function(key, value){
                            $('select[name="ville"]').append('<option value="'+value+'">'+ value +'</option>');
                        });
                    }
                })
            } else {
                $('select[name="ville"]').empty();
            }
        });
    }); 
</script>

and this is the route:

   Route::get('deleg/{id}','specvil@delegation');

Answer 1

Most probably the problematic part in your code is in the controller function:

public function delegation($id) {
    $delegation = region::where('ville_id',$id)->pluck('region','id');
    return json_encode($delegation);
}

In the above code it looks like that you are selecting data from the wrong Model or you select wrong data, since you would like to get back the cities(ville) based on the chosen region id. So this part of your code is confused or not fully clear from what you shared with us. But, since you have not shared all of the important parts of your code thus I would just like to share a working version of your codes below.

Within minutes I more or less duplicated your codes in my test. I created 2 Tables , regions and citys together with two Models : Region and City . I will detail it here not only for you but later developers who look for similar codes.

The regions table :

+-------------+------------------+------+-----+---------+----------------+
| Field       | Type             | Null | Key | Default | Extra          |
+-------------+------------------+------+-----+---------+----------------+
| id          | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| created_at  | timestamp        | YES  |     | NULL    |                |
| updated_at  | timestamp        | YES  |     | NULL    |                |
| region_name | varchar(191)     | NO   |     | NULL    |                |
+-------------+------------------+------+-----+---------+----------------+

and the citys table (this table has a foreign key from regions table as region_id):

+------------+---------------------+------+-----+---------+----------------+
| Field      | Type                | Null | Key | Default | Extra          |
+------------+---------------------+------+-----+---------+----------------+
| id         | bigint(20) unsigned | NO   | PRI | NULL    | auto_increment |
| created_at | timestamp           | YES  |     | NULL    |                |
| updated_at | timestamp           | YES  |     | NULL    |                |
| city_name  | varchar(191)        | NO   |     | NULL    |                |
| region_id  | bigint(20) unsigned | NO   | MUL | NULL    |                |
+------------+---------------------+------+-----+---------+----------------+

The models: App\Region Model in region.php

class Region extends Model{}

And App\City Model in city.php file of course.

class City extends Model{}

I created 9 cities connected to 3 regions As sample data in the above tables.

In my web.php file I placed these few lines of route definitions similarly to yours:

Route::get('/deleg/{id}', 'Drop1@getCities');
Route::get('/drop', 'Drop1@index');
Route::view('/ghof', 'ghof');

In the above route definition you can see that I called my controller Drop1 but it does not really matter how we name that.

So, in my Drop1.php controller file I placed your two most important functions correctly. The first method will provide the regions from Region Model when the page is loaded and the second method will provide the cities from the City Model after someone chose a region and the ajax call will be triggered to get all of the cities of the chosen region.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Region; // model
use App\City;   // model

class Drop1 extends Controller
{

public function index()
    {
        $ville = Region::orderBy('id','asc')->get()->pluck('region_name','id');
        return view ('dropdowntest',[ 'vi' => $ville ]);
    }

public function getCities($region_id)
    {
        $delegation = City::where('region_id', $region_id)->pluck('city_name','id');
        return json_encode($delegation);
    }

  // a lot of other methods...
}

I repaired your delegation() method and renamed that to getCities() actually, so nothing too special.

And finally your view/layout file almost the same as yours, I just renamed that to dropdowntest , I did not change your layout and script relevantly at all.

So dropdowntest.blade.php :

<h2>Here is a dropdown menu test</h2>
    <form action="{{ '/ghof' }}" method="get">
      {{ csrf_field() }}
    <div class="container mine">
      <select class="form-control form-control-lg search-field location" name="region" id="region">
        <option selected></option>
        @foreach($vi as  $key => $value)
          <option value="{{$key}}">{{$value}}</option>
        @endforeach
      </select>
      <select type="text" class="form-control form-control-lg search-field location" name="ville" id="ville"></select>
      <button class="search-btn" type="submit" id="search"> Recherche </button>
    </div>
    </form>
</body>

<script type="text/javascript">
    $(document).ready(function () {
        $('select[name="region"]').on('change', function() {
            var ville_id = $(this).val();
            if (ville_id) {
                $.ajax({
                    url: '/deleg/' + ville_id,
                    type: 'GET' ,
                    dataType: 'json',
                    success: function(data) {
                        $('select[name="ville"]').empty();
                        $.each(data,function(key, value){
                            $('select[name="ville"]').append('<option value="'+value+'">'+ value +'</option>');
                        });
                    }
                })
            } else {
                $('select[name="ville"]').empty();
            }
        });
    });

</script>

<style>
.location {
  width:30%;
  float: left;
}

</style>

And I place here the result which shows that the above works without any problem:

I hope I have not left out anything and this is what you were looking for. Most probably you just need to check and repair you delegation() method in your code and the whole thing will work as mine.