PHP Country Based City Dropdown with jQuery & Ajax
Are you looking for a PHP country based city dropdown with jQuery? Then here you have a solution to do that. By using jQuery & Ajax we going to load the City data based on the Country using PHP. First, we entering default country data in the select element based on that fetching data from fetch.php file. In the fetch.php, we listed the country data in an array format and stored it in countryData variable.
In the below code we listed default country list in the select element and through jQuery fetch the data from fetch.php and if country select match the country list the relevant city data will append on result ID.
index.php
|
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 46 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>PHP Country Based City Dropdown with jQuery & Ajax</title> <style> .p-1 { padding: 1rem; } </style> </head> <body> <form> <div class="p-1"> <label>Country:</label> <select class="countryList"> <option>Select Country</option> <option value="India">India</option> <option value="Spain">Spain</option> <option value="USA">USA</option> <option value="UK">UK</option> <option value="Philippines">Philippines</option> </select> </div> <div class="p-1" id="result"> <!-- City Data List --> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $(".countryList").change(function () { var selectedCountry = $(".countryList option:selected").val(); $.ajax({ type: "POST", url: "fetch.php", data: { countryList: selectedCountry }, }).done(function (data) { $("#result").html(data); }); }); }); </script> </body> </html> |
fetch.php
|
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 |
<?php if (isset($_POST["countryList"])) { // Get the Selected City $countryList = $_POST["countryList"]; // City Data In Array Format $countryData = [ "India" => ["Chennai", "Bangalore", "Mumbai", "Kochi", "Jaipur"], "Spain" => ["Barcelona", "Madrid", "Seville", "Seville"], "USA" => ["New York City", "Chicago", "Washington, D.C.", "San Francisco"], "UK" => ["London", "Birmingham", "Bristol", "Manchester"], "Philippines" => ["Manila", "Quezon City", "Makati"], ]; // List the City Name Based On Country Select if ($countryList !== 'Select') { echo "<label>City: </label>"; echo "<select>"; foreach ($countryData[$countryList] as $data) { // Looping the City Data echo "<option>" . $data . "</option>"; } echo "</select>"; } } ?> |
Conclusion:
I hope this article will help you to do country based city dropdown with PHP and jQuery. If you have any queries about this topic let me know in the comment section and if you like this article share it with your friends.
