title: Use AJAX or pre-load: dynamic changes of items in select element
body: <p>Apologies in advance for a long question: I do want to give all the relevant information.</p>
  
  <p>In our (quite large) web application, we have a generic code for entering addresses (there could be a number of different addresses: business address, users' address, online shop delivery address, etc.)  The addresses can be anywhere in the world, although the site itself is in English (and for now we have no plans to change this aspect).  The standard address has these fields:</p>
  
  <ul>
  <li>Street address</li>
  <li>City</li>
  <li>State/County/Province</li>
  <li>Postal/ZIP code</li>
  <li>Country</li>
  </ul>
  
  <p>Some fields are optional, of course (e.g. there are no postcodes in Republic of Ireland, for example and there are no state/county/province division in many countries).  The issue we're having is exactly with the state/county/province field: as it can be anywhere in the world, we are currently using <code>&lt;input type='text'/&gt;</code> for this field.  However now users put anything they feel like into it - and we don't even have unified values for where they should be (e.g. for Boston, Massachusetts, some user put <code>MA</code>, some put <code>Mass</code>, some put <code>Massachusetts</code>, some put <code>Middlesex county, Ma</code>, and so on - I'm not even talking about all the misspellings).  This makes any statistics by geography almost useless.</p>
  
  <p>To mitigate this issue, we're moving to a different way of entering addresses: the user must select the country first, then based on the country selection we will display a dropdown <code>&lt;select&gt;</code> element with the list of states, counties, provinces, etc. valid for that country.  If the country doesn't have this division (as far as our system is aware), then we revert back to the plain text field.  So far, so good.</p>
  
  <p>Now, for the actual question. We have a table in a DB that contains this county/state/province/etc division per country. The volume of data is not large: at present, 7 countries with 262 counties/states/provinces across all of them (i.e. total 262 rows in the table).  I'm sure this will grow, but not hugely. There are two ways to handle this:</p>
  
  <ol>
  <li><p>Pre-load all this data, put it into global javascript variables and in the <code>onchange</code> of the dropdown for the country update the corresponding dropdown for the state/county/province.</p></li>
  <li><p>Use AJAX in the <code>onchange</code> for the country dropdown to load the country-specific list from the database as/when it's needed.</p></li>
  </ol>
  
  <p>Which option, in your opinion, is the better one (preferably with some reasoning as to why)?</p>