title: Updating html select options after choosing another select option using PHP and Javascript with JQuery
body: <p>Consider the following structure:</p>
  
  <p>A table named "Regions" with the columns "id","name".</p>
  
  <p>A table named "Cities" with the columns "id","region_id","name".</p>
  
  <p>What is the best way to repopulate an html select options using PHP and Javascript?</p>
  
  <p>For example lets say I have the following php code:</p>
  
  <pre><code>&lt;select name = "region"&gt;
  &lt;option value = ""&gt;Select Region&lt;/option&gt;
  &lt;?
   foreach ($regions as $region)
   {
    echo "&lt;option value = '$region[id]'&gt;region[name]&lt;/option&gt;";
   }
  ?&gt;
  &lt;/select&gt;
  
  &lt;select name = "city"&gt;
   &lt;option value = ""&gt;Select City&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Once a region has been selected, all the cities with the proper foreign key "region_id" that corresponds to the selected region, will be populated into the cities select.</p>
  
  <p>Assume that I use this kind of structure a lot, so I do want to have a minimal, easy to reuse code.</p>