Dynamic selection how fetch 'Specific Cities of Specific State of Specific Country'? - php

Question

I have the following setup of a dynamic select options for Country, State and City using php and jquery ajax.
But the problem with this setup is, if two or more of the states have the same name, all of their associated cities become the output irrespective of country.
Like the image below (please imagine Canada has a state named California for the sake of this example):
How can I solve this problem, that is how can I get the output of Cities of State California of Country USA?
These are the sections I guess I need to improve. I have been trying a few methods but none of them is working. So I'll really appreciate any help.
The ajax:
$('.action').change(function() {
if ($(this).val() != '') {
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
if (action == "country") {
result = 'state';
} else {
result = 'city';
}
$.ajax({
url: "fetch.php",
method: "POST",
data: {
action: action,
query: query
},
success: function(data) {
$('#' + result).html(data);
}
})
}
});
And the php query I have tried:
$query = "SELECT city FROM country_state_city WHERE state = '" . $_POST["query"] . "'";
$result = mysqli_query($connect, $query);
$output.= '<option value="">Select City</option>';
while ($row = mysqli_fetch_array($result))
{
$output.= '<option value="' . $row["city"] . '">' . $row["city"] . '</option>';
}
This is the full code in case you need to have a look:
index.php
<?php
$country = '';
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";
$result = mysqli_query($connect, $query);
while ($row = mysqli_fetch_array($result)) {
$country .= '<option value="' . $row["country"] . '">' . $row["country"] . '</option>';
}
?>
<select name="country" id="country" class="form-control action">
<option value="">Select Country</option>
<?php echo $country; ?>
</select>
<select name="state" id="state" class="form-control action">
<option value="">Select State</option>
</select>
<select name="city" id="city" class="form-control">
<option value="">Select City</option>
</select>
<script>
$(document).ready(function () {
$('.action').change(function () {
if ($(this).val() != '')
{
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
if (action == "country")
{
result = 'state';
} else
{
result = 'city';
}
$.ajax({
url: "fetch.php",
method: "POST",
data: {action: action, query: query},
success: function (data) {
$('#' + result).html(data);
}
})
}
});
});
</script>
And the fetch.php
<?php
if (isset($_POST["action"])) {
$output = '';
if ($_POST["action"] == "country") {
$query = "SELECT state FROM country_state_city WHERE country = '" . $_POST["query"] . "' GROUP BY state";
$result = mysqli_query($connect, $query);
$output .= '<option value="">Select State</option>';
while ($row = mysqli_fetch_array($result)) {
$output .= '<option value="' . $row["state"] . '">' . $row["state"] . '</option>';
}
}
if ($_POST["action"] == "state") {
$query = "SELECT city FROM country_state_city WHERE state = '" . $_POST["query"] . "'";
$result = mysqli_query($connect, $query);
$output .= '<option value="">Select City</option>';
while ($row = mysqli_fetch_array($result)) {
$output .= '<option value="' . $row["city"] . '">' . $row["city"] . '</option>';
}
}
echo $output;
}
?>

Answer 1

You need populate next selects for all filled selects before and build right query for data.
#Example for populate CITY you need to know which are COUNTRY and STATE was selected.
PHP
if(isset($_POST['country']) && $_POST['country'] != ''
&& (!isset($_POST['state']) || $_POST['state'] == '') {
// return STATES for selected COUNTRY
$sql = "SELECT country, state FROM tbl WHERE country = {postCountry}";
}
else if(isset($_POST['country']) && $_POST['country'] != ''
&& isset($_POST['state']) && $_POST['state'] == '') {
// return CITIES for selected COUNTRY and STATE
$sql = "SELECT country, state, city FROM tbl WHERE country = {postCountry} AND state = {postState}";
}
This query
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC";
can be changed to DISTINCT
$query = "SELECT DISTINCT country FROM country_state_city ORDER BY country ASC";
JQUERY
Is good approach to wrap data into form because it provides easy work with form elements like selects.
$('.action').change(function() {
var formValues = $(this).closest('form').serialize();
$.ajax({
url: "fetch.php",
method: "POST",
data: formValues,
success: function (data) {
$('#' + result).html(data);
}
});
});
You can check DevTools Console on change and XHR request in Network in demo which values are sent in request to PHP.
DEMO JQUERY
Hope this help.
Happy coding