How to dynamic populate a select menu based on the choice of another | AJAX and JSON tutorial

In this video we are gonna see how to dynamically populate the options of
a select drop down menu depending on the choice we make on another.

Let me explain.
We have two select menus, the first menu is populated with countries, and the second menu is empty (at start). So when we choose a country in the first menu, our code (which we will write) will run and fetches the associated cities and fill the second menu.

We are going to do this with javascript and JSON. The data (countries and cities) as you will see,
are stored in a JSON file, and from there we are going to fetch them and display them in the second drop down menu.

We are going to use an HTTP request with the Fetch API.

You can read the article on my website

[septimusforster]

Very instructive, thank you. One thing I want to point out, however, is that, the FETCH request should be done outside the 'getCities' function, which would mean that its 'let' variables are also declared globally...otherwise, each time 'getCities' run, it would always make a FETCH request, which if it is requesting a file from a server, can cause low-speed performance.

[muhammadadilhussain]

What if the JSON, is not given by me but it is extracted from the oracle data base with perl code and I am retrieving the data in json form in javascript, then how can I achieve this dynamic list selection task any hint?

Nice video though :)

[junivensaavedra]

Excellent resource. Thank you very much. :)

[youneselhamss]

Cool! But I've noticed that once you've chosen a country option and you go back to the empty country option, the city options don't disappear again they stay with the same options as the latest country chosen. How would we fix that?

[josmadelmodavi]

Wow! Is it possible to create a larger cascade? With other iterations (if/else)? Thanks!