How to display country, state and city in html select input?

Question

I want to display all countries on my first select input. Once they select country will display state based on the selected country. Once they select State will display the cities based on the selected state. How to achieve this using javascript and jQuery

Answer 1

var species =
{
"Pisces" : [ "Whale", "Shark", "Salmon" ],
"Aves" : [ "Eagle", "Dove", "Cockatoo" ],
"Reptiles" : [ "Snake", "Iguana", "Komodo" ],
"Amphibians" : [ "Salamander", "Frog", "Alligator" ],
"Mammals" : [ "Horse", "Cat", "Dog"]
};

You mentioned the options here. Instead of mention here can we get list of countries, states and cities in api or json?

Answer 2

This code isn't about countries, states or city, but the idea comes close to your plan.

https://code.sololearn.com/Wsm58eJD3rmZ/?ref=app

Answer 3

Thank you Ipang
You have added options using static value. How to get all the countries list dynamically?

Answer 4

I haven't tried playing with APIs, but if the returned data was in JSON format then I think it's possible, if we know how the data was structured.

Answer 5

Thanks for your advice.

Answer 6

You mean Maps on your website

I know how to add live maps location in html

Answer 7

ANBARASAN R
Sorry, I didn't get what you mean.
Dynamically meaning?