Archaana's avatar

Display Countries and state drop down where the state dependent on the country

HI. So i want to do dropdown of countries and state.So far I can display my country using the 'pluck'. Now I dont know how to make the state depent on the country choosen to show in the drop down .

blade.php

 <div class="form-group pmd-textfield pmd-textfield-floating-label ">
                            <label>Country</label>
                            <select name= "" class="form-control">
                                <option value="">Select Country</option>  
                                @foreach ($country as $country)
                                  
                                 <option>{{$country}}</option>  
                                
                                @endforeach   
                            </select><span class="pmd-textfield-focused"></span>
                        </div>

                        <div class="form-group pmd-textfield pmd-textfield-floating-label ">
                            <label for="type_id">State</label>
                            <select name= "state" id="stateId" class="states order-alpha form-control">
                                <option value="">Select State</option>       
                                
                            </select><span class="pmd-textfield-focused"></span>
                        </div>

controller.php

public function create()
    {

        
        $countries = Countries::where('geo.subregion', "South-Eastern Asia");
        $country = $countries->pluck('name.common');
        $state = $countries->where('cca2', $state)->first()->hydrateStates()->states->pluck('name');
        return view('job.create', compact('country'));
    }
0 likes
6 replies
abhijeet9920's avatar

Hello @archaana,

You can do that using jquery and AJAX. You have to create a separate method that returns all states based on their respective country ids.

<?php
public function states($country_id){
	//Assuming you've created States model for `States table
	$states = States::where('country_id', $country_id)->select('id','name')->get();
	return response()->json($states);
}
?>

This will returns all states for given country id. You have to use this URL in AJAX.

//Id of yoyr country dropdown
$("#country").on('change', function(){
	var selectedCountry = $("#country option:selected").val();
    	$.ajax({
        	url: "<route_for_above_function>",
        	success: function(response){
        		var html = '';
        		$("#country").html(''); //For clearing old option list
        		for(var i = 0; i < response.length; i++) {
        	    		var obj = response[i];
        	    		html += '<option value="'+obj.id+'">'+obj.name+'</option>';
        		}
        		$("#country").html(html);
        	}
    	});
});

You can also visit here.

Archaana's avatar

Hiiii. Thank buddy but i have not create any table for this. I am just using the package. so should i have to create table to store them ?

abhijeet9920's avatar

What do you mean by ** You're just using package**? Are you have a JSON file which you are using as a data source? How your package is maintaining data for your country and state? I would suggest storing data in tables and use Laravel Models, You can then use Eloquent relationships, Route model bindings.

Mukhusin's avatar

@archaana I think this will help you

    use PragmaRX\Countries\Package\Countries;
    use PragmaRX\Countries\Package\Services\Config;

    $countries = new Countries(new Config([
        'hydrate' => [
            'elements' => [
                'currencies' => true,
                'flag' => true,
                'timezones' => true,
            ],
        ],
    ]));	
   $country = json_decode($countries->all()->pluck('name')->toJson());

in blade

        @foreach ($country as  $nation)
              <option value="{{ $nation->common }}">{{ $nation->common }}</option>
       @endforeach
1 like

Please or to participate in this conversation.