Laravel Country State City is a package that provides an easy way to create dropdowns for selecting countries, states, and cities in your Laravel applications. This is particularly useful for forms where location selection is required, and it simplifies the process of populating these dropdowns with the relevant data.
Key Features
- Easy Integration: Simple setup for adding country, state, and city dropdowns.
- AJAX Support: Load states and cities dynamically based on the selected country and state.
- Up-to-Date Data: Comes with pre-populated lists of countries, states, and cities.
- Customizable: You can easily customize the dropdowns and data source.
Installation
To install the package, you can use Composer. Run the following command in your terminal:
|
1 |
composer require "rinvex/countries" |
Configuration
Once the package is installed, you need to publish the configuration file:
|
1 |
php artisan vendor:publish --provider="Rinvex\Countries\CountriesServiceProvider" |
Usage
1. Create Dropdowns in Blade Template
You can create the country, state, and city dropdowns in your Blade template. Here’s a basic example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<select id="country" name="country"> <option value="">Select Country</option> @foreach ($countries as $country) <option value="{{ $country->code }}">{{ $country->name }}</option> @endforeach </select> <select id="state" name="state" disabled> <option value="">Select State</option> </select> <select id="city" name="city" disabled> <option value="">Select City</option> </select> |
2. Load Countries in Controller
In your controller, you can retrieve the list of countries and pass it to the view:
|
1 2 3 4 5 6 7 8 |
use Rinvex\Countries\Models\Country; public function create() { $countries = Country::all(); return view('your-view', compact('countries')); } |
3. Dynamic State and City Loading with AJAX
To load states and cities based on the selected country and state, you will need to use AJAX. Here’s an example using jQuery:
Blade Template JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#country').change(function() { var countryCode = $(this).val(); if (countryCode) { $.ajax({ url: '/get-states/' + countryCode, type: 'GET', success: function(data) { $('#state').empty().prop('disabled', false); $('#state').append('<option value="">Select State</option>'); $.each(data, function(index, state) { $('#state').append('<option value="' + state.code + '">' + state.name + '</option>'); }); } }); } else { $('#state').empty().prop('disabled', true); $('#city').empty().prop('disabled', true); } }); $('#state').change(function() { var stateCode = $(this).val(); var countryCode = $('#country').val(); if (stateCode) { $.ajax({ url: '/get-cities/' + countryCode + '/' + stateCode, type: 'GET', success: function(data) { $('#city').empty().prop('disabled', false); $('#city').append('<option value="">Select City</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.name + '">' + city.name + '</option>'); }); } }); } else { $('#city').empty().prop('disabled', true); } }); }); </script> |
4. Define Routes
You need to define the routes for fetching states and cities:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
use Rinvex\Countries\Models\Country; use Illuminate\Support\Facades\Route; Route::get('/get-states/{country}', function ($country) { $states = Country::find($country)->states()->get(); return response()->json($states); }); Route::get('/get-cities/{country}/{state}', function ($country, $state) { $cities = Country::find($country)->states()->find($state)->cities()->get(); return response()->json($cities); }); |
Conclusion
The Laravel Country State City package simplifies the process of creating dynamic dropdowns for selecting countries, states, and cities in your Laravel application. With the ability to load states and cities based on the user’s selections using AJAX, it enhances user experience by providing a seamless way to input location data.