Laravel chained dropdown selection using jquery ajax

Question

I'm using laravel 5.6 and I've made dropdown selection but it didn't work. I choosed a province in dropdown menu provinces but the menu city not shown up the data of cities. This is my controller :

public function province()
      {
        $prov = Province::orderBy("provinsi.id","ASC")
                        ->pluck("name","id");
        return view('auth.register',compact('prov')); 
      }

public function cities($id)
      {
        $city = City::where("id_provinsi","=",$id)
                      ->pluck("city_name","id");
        return json_encode($city);
      }

This is my route:

Route:: get('/register', 'Auth\RegisterController@province');
Route:: get('/register/cities/{id}', 'Auth\RegisterController@cities');

This is my view:

<div class="form-group row">

 <label for="prov" class="col-md-4 col-form-label text-md-right">{{ __('Provinsi') }}</label>

  <div class="col-md-6">
    <select name="prov" class="form-control">
        <option value="">=== Choose Province ===</option>
          @foreach ($prov as $key=>$value)                               
             <option value="{{$key}}">{{$value}}</option>                                    
          @endforeach
      </select>
       </div>
        </div>
 <div class="form-group row">
   <label for="city" class="col-md-4 col-form-label text-md-right">{{ __('City') }}</label>
  <div class="col-md-6">
   <select name="cities" class="form-control"> </select>
    </div>
     </div>

This is my javascript:

<script type="text/javascript">

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

</script>

I got the data json if I open the url /register/cities/(any province id) .

You can return HTML content from your controller. And just append it in your city dropdown is rendering. — Siddharajsinh Zala
– Siddharajsinh Zala, Commented Aug 31, 2018 at 13:28

Francesco Simeoli · Accepted Answer · 2018-08-31 13:54:00Z

1

Make sure the response returned in

public function cities($id) { ... }

is in JSON format.

To do this check network log in your browser (in Firefox o Chrome F12 -> Net:XHR -> Response) or add a colsole.log(data) in the success callback.

answered Aug 31, 2018 at 13:54

Francesco Simeoli

5415 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahadian Wiratama Over a year ago

I check on my firefox, got status 404. hmmm.

Francesco Simeoli Over a year ago

It's not good! But at least we understand where the problem is :) Change this line: "url: '/register/cities/'+provID". Give an absolute url and and verify that provID variable is set.

Rahadian Wiratama Over a year ago

after I change my url. now the city menu shown [object Object] not the name of the cities.

Alexander Villalobos · Accepted Answer · 2018-08-31 14:43:56Z

1

in your view replace you second select

 <select name="cities" class="form-control" id='cities'> </select>

your first select change this

<select name="prov" class="form-control">
  <option value="">=== Choose Province ===</option>
    @foreach ($prov as $key=>$value)                               
        option value="{{$value->id}}">{{$value->name}}</option>                                    
    @endforeach
</select>

next changue in your controller

public function cities($id)
 {
   $city = City::where("id_provinsi",$id)->get()              
   return response()->json(['cities' => $city], 200);
 }

changue this in your each inside ajax

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

changue your url ajax for this

 url:"{{ url('/register/cities/') }}/"+provID;

edited Aug 31, 2018 at 14:43

answered Aug 31, 2018 at 14:18

Alexander Villalobos

4613 silver badges11 bronze badges

3 Comments

Rahadian Wiratama Over a year ago

it doesnt work. in my console chrome, shown up myweb/register/cities/2 404 ()

Alexander Villalobos Over a year ago

error 404 if for no found Verify well that you are sending the parameters correctly

Rahadian Wiratama Over a year ago

i change my url from my javascript to my absolute url and now it's work.

Siddharajsinh Zala · Accepted Answer · 2018-08-31 13:31:34Z

0

public function cities($id)
{
        $city = City::where("id_provinsi","=",$id)
                      ->pluck("city_name","id");

       $html = view('city_list', compact('city'))->render();
        return response()->json([
            'html' => $html             
        ]);

}

city_list.blade.php

<select name="city" class="form-control">
    <option value="">=== Choose City===</option>
  @foreach ($city as $key=>$value)                               
     <option value="{{$key}}">{{$value}}</option>                                    
  @endforeach
</select>

answered Aug 31, 2018 at 13:31

Siddharajsinh Zala

711 silver badge10 bronze badges

Collectives™ on Stack Overflow

Laravel chained dropdown selection using jquery ajax

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related