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!

You can simply use load method in the jQuery. See the example below.

$( "#dropdowndiv" ).load( "ajax/11290.html" );

You can either store the whole select there or just the options. Depending on what you store in the file use the jQuery selector.

Note

Having thousands of users won't slow your site down if you have implemented the site correctly. Search the term High Availability For Database.

What you can do is create a few arrays in a separate js file that hold the values ie:

var myCars=new Array("Saab","Volvo","BMW");

Then dynamically create the options with a for loop (or foreach) in jquery by looking here:

How to create options of a select element dynamically using jquery?

I would provide more code samples, but I am limited since I am on my phone.