Here we will use an API to get a dropdown list of all countries. When we select the country we will get the list of states of that country and after selecting the state we will get the list of cities of that state.
Here is the complete code to get that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Display Country State City using Google API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Address:</label>
<div class="col-sm-8">
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var all_countries;
var all_states;
var all_cities;
var selected_state;
var selected_country;
var countries = {
"url": "https://countriesnow.space/api/v0.1/countries/iso",
"method": "GET",
"timeout": 0,
};
$.ajax(countries).done(function(response) {
console.log(response['data']);
all_countries = response['data'];
var i = 0;
$.each(response['data'], function() {
optionValue = i;
optionText = response['data'][i]['name'];
i++;
$('#countryId').append(`<option value="${optionValue}">
${optionText}
</option>`);
});
});
$('#countryId').on('change', function() {
var c_iso_2 = this.value;
selected_country = all_countries[c_iso_2]['name'];
var states = {
"url": "https://countriesnow.space/api/v0.1/countries/states",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json"
},
"data": JSON.stringify({
"country": selected_country
}),
};
$.ajax(states).done(function(response) {
all_states = response['data']['states'];
var i = 0;
$('#cityId').children('option:not(:first)').remove();
$('#stateId').children('option:not(:first)').remove();
$.each(all_states, function() {
optionValue = i;
optionText = all_states[i]['name'];
i++;
$('#stateId').append(`<option value="${optionValue}">
${optionText}
</option>`);
});
});
});
$('#stateId').on('change', function() {
var state = this.value;
var selected_state = all_states[state]['name'];
var city = {
"url": "https://countriesnow.space/api/v0.1/countries/state/cities",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json"
},
"data": JSON.stringify({
"country": selected_country ,
"state": selected_state
}),
};
$.ajax(city).done(function(response) {
// console.log(response['data']);
all_cities = response['data'];
var i = 0;
$('#cityId').children('option:not(:first)').remove();
$.each(all_cities, function() {
optionValue = i;
optionText = all_cities[i];
i++;
$('#cityId').append(`<option value="${optionValue}">
${optionText}
</option>`);
});
});
});
});
</script>
Fixed my question with the following
document.getElementById(“hidstate”).value = stateId.options[stateId.selectedIndex].innerHTML;
I will update this also
Really nice code, thank you. If I wanted to save the value of the text field to my DB instead of the numeric value, I can do so my changing optionValue to optionText. However that breaks the change events that update the drop downs. Is there a way I can keep the change event working but have the value of the generated drop down options be the text?
Thank you,
Judson