I am trying to create a dynamic city drop-down selector, where a user selects a country, then a region, then a city. Right now I have two tables in a MySQL database, one with all the regions, and one with all the cities, and I am using jQuery to first load the regions when a user selects a country, then a city when a region is selected.
My site gets quite a bit of traffic, and I am worried this is terribly inefficient... every time someone makes a selection, the database is queried and sometimes hundreds of rows are parsed and returned.
Instead of querying the database, since the list of cities will never change, I want to store each country and region as a separate file, and load them when needed.
For example: IE.html (Ireland)
<option value="0" selected>- Select -</option>
<option value="11287">Connaught</option>
<option value="11288">Leinster</option>
<option value="11289">Munster</option>
<option value="11290">Ulster</option>
11290.html (Ulster)
<option value="xxxxxxx">Buncrana</option>
<option value="xxxxxxx">Cavan</option>
<option value="xxxxxxx">Letterkenny</option>
<option value="xxxxxxx">Monaghan</option>
The problem is, I can't figure out how to load these files back into the select menus. There are loads of resources out there about creating options with external files, but I can't find anything about loading plain HTML into the form.
Is this even possible?
Thank you!