Select country first from a dropdown menu, then region and then city?

I'm 开发者_Go百科using html SELECT to make 3 drop-down menus. One for a list of countries, one for regions and one for cities.

They all have different tables in the database and they are linked to each other with foreign keys.

I want to force the user to first select a country while the other two menus are locked. When he has selected a country he will be able to select a region, and then a city. How do I do this?

Which part are you specifically having problems with?

1) Populate the countries list when the user loads the page, other 2 menus are disabled. (SELECT * FROM Countries;)
2) When the user selects a country, send an AJAX request to the server containing the country name. (SELECT * FROM Regions WHERE id = country_id;)
3) When you receive the AJAX response, populate the regions list and enable it.
4) Repeat steps 2 and 3 for the city name.

You've got several possibilities.

1. You could write a single select that retrieves all the country-region-city combinations at one time, and use the rows to create Javascript objects representing this data at load time. Then create a Javascript method that updates the dependent rows when a new country or region is selected.

2. You could write 3 select statements, 1 for countries, 1 for regions for a given country, and 1 for cities for a given region. The countries select would run at page load time, and the other queries could be performed using an Ajax request when country and region are selected.

Try this premade script and start accepting answers.., people might be more willing to help.