2

How can I get my city lists base on selected province?

my controller:

public function index() {
        $province = RajaOngkir::Provinsi()->all();
        $city = RajaOngkir::kota()->all();
        return view('welcome', compact('province', 'city'));
    }

my blade:

<div>
    <select name="province" id="">
        <option class="form-control" value="">Select Province</option>
        @foreach ($province as $info)
        <option value="{{ $info['province_id'] }}">{{ $info['province'] }}</option>
        @endforeach
    </select>

    <select name="city" id="">
        <option class="form-control" value="">Select City</option>
        @foreach ($city as $info)
        <option value="{{ $info['city_id'] }}">{{ $info['city_name'] }}</option>
        @endforeach
    </select>
</div>

screenshot:

screenshot

PS: My data coming from third-party website and there is no data in my database including country province city etc. As I was suggested to other question and website unfortunately those solutions will not work for me.

UPDATE

my controller:

public function index() {
        $province = RajaOngkir::Provinsi()->all();
        $city = RajaOngkir::kota()->all();
        return view('welcome', compact('province', 'city'));
    }

    public function getCityList($province_id)
    {
        $city = RajaOngkir::kota()->all()->where("province_id",$province_id)->get();
        return response()->json($city);
    }

My route:

Route::get('/', 'rajaongkirController@index');
Route::get('/get-city-list/{province_id}','rajaongkirController@getCityList');

My view (blade:

<div class="col-md-6">
                    <select name="province" id="province">
                        <option class="form-control" value="">Select Province</option>
                        @foreach ($province as $info)
                        <option value="{{ $info['province_id'] }}">{{ $info['province'] }}</option>
                        @endforeach
                    </select>

                    <select name="city" id="">
                        <option class="form-control" value="">Select City</option>
                    </select>
                </div>

<script type="text/javascript">
            $(document).ready(function() {
            $('select[name="province"]').on('change', function() {
                var provinceID = $(this).val();
                    if(provinceID) {
                    $.ajax({
                        url: '/get-city-list/'+encodeURI(provinceID),
                        type: "GET",
                        dataType: "json",
                        success:function(data) {
                        $('select[name="city"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="city"]').append('<option value="'+ value +'">'+ value +'</option>');
                            });
                        }
                    });
                    }else{
                    $('select[name="city"]').empty();
                      }
                   });
                });
        </script>
Community
  • 1
  • 1
mafortis
  • 6,750
  • 23
  • 130
  • 288
  • 1
    I recommend you to prefer this link for further implementation: [link](http://www.expertphp.in/article/dependent-country-state-city-dropdown-using-jquery-ajax-in-laravel-5-example) – Rahul Jan 17 '18 at 08:25
  • Possible duplicate of [Laravel dynamic dropdown country and state](https://stackoverflow.com/questions/45060108/laravel-dynamic-dropdown-country-and-state) – Rahul Jan 17 '18 at 08:26
  • @rahulsm that will not solve my problem because i'm not using database data data coming from another website there is no list of `province` or `city` etc. in my database. – mafortis Jan 17 '18 at 08:34
  • try dd($city) and show us what it prints – Sohel0415 Jan 17 '18 at 09:02
  • @Sohel0415 here you go https://ibb.co/dvWt96 – mafortis Jan 17 '18 at 09:11
  • @mafortis Look at my answer, its not complete solution to your problem, rather its a procedure that you can follow. – Sohel0415 Jan 17 '18 at 09:22

1 Answers1

2

First, change your controller index function to this-

public function index() {
    $province = RajaOngkir::Provinsi()->all();
    return view('welcome', compact('province'));
}

Second, make a onchange() ajax function call as @rahulsm's link, with a selected $province_id. Your called controller function can be-

public function getCityList($province_id)
{
    $city = RajaOngkir::kota()->where("province_id",$province_id)->get();

    return response()->json($city);
}

And your url route file might be-

Route::get('api/get-city-list/{province_id}','APIController@getCityList');

And in your view remove this-

<select name="city" id="">
    <option class="form-control" value="">Select City</option>
    @foreach ($city as $info)
    <option value="{{ $info['city_id'] }}">{{ $info['city_name'] }}</option>
    @endforeach
</select>

to this and filled this data with ajax request/data.

<select name="city" id="">
    <option class="form-control" value="">Select City</option>
</select>
Sohel0415
  • 9,523
  • 21
  • 30
  • I added this js but nothing changed, city names will not load: https://codeshare.io/5Pm6oY – mafortis Jan 17 '18 at 09:34
  • try `dd($province_id)` in your `getCityList` method, make sure you are calling, right?? – Sohel0415 Jan 17 '18 at 09:37
  • that means your ajax call is failing, search and make a right ajax call, or make onchange jquery call or with javascript. You can see this link https://laravel.io/forum/03-13-2014-ajax-for-onchange-of-select-box-with-laravel-change-with-multiple-source-object-like-textbox1-textbox2 – Sohel0415 Jan 17 '18 at 09:44
  • i tried that sample, didn't work! :\ can you update your answer please? – mafortis Jan 17 '18 at 09:51
  • .are you there? – mafortis Jan 17 '18 at 10:20
  • when i visit `http://domain.dev/get-city-list/21` to test url, i will get this error `Call to undefined method rizalafani\rajaongkirlaravel\app\Kota::where()` and when i change your code to this `$city = RajaOngkir::kota()->all()->where("province_id",$province_id)->get();` i will get this error `Call to a member function where() on array` any idea? – mafortis Jan 17 '18 at 10:22
  • Hi again, I played with my javascript code and function as well, now I can see some changes in fron-end here is my current codes: https://codeshare.io/ad6q1R and this is screenshot https://ibb.co/jkiiRm – mafortis Jan 18 '18 at 00:30
  • seems your are very close, try `alert(JSON.stringify(value, null, 4));` in your js function before appending. – Sohel0415 Jan 18 '18 at 04:56
  • i get alert with this info `{ "city_id": "106", "province_id": "3", "province": "Banten", "type": "Kota", "city_name": "Cilegon", "postal_code": "42417" }` – mafortis Jan 18 '18 at 06:23
  • fantastic, now change append to this `append('');` – Sohel0415 Jan 18 '18 at 06:24
  • i don't know but congrats, you have come a long way to make it – Sohel0415 Jan 18 '18 at 06:29