title: AJAX pre-populated drop down menu
body: <p>This is a bit complicated so bear with me:</p>
  
  <p>On FORM.php, I have 2 drop down menus:</p>
  
  <p><code>Plant type</code> drop down that allows the user to select 'Plant type'.</p>
  
  <p><code>Plant sub-type</code> drop down that via AJAX and a call to the database presents multiple choices for 'Plant sub-type'.</p>
  
  <p>AJAX code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function getXMLHTTP() {
          var xmlhttp = false;
          try {
              xmlhttp = new XMLHttpRequest();
          }
          catch (e) {
              try {
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e) {
                  try {
                      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                  }
                  catch (e1) {
                      xmlhttp = false;
                  }
              }
          }
          return xmlhttp;
      }
  
      function getPlantSubtype(strURL) {
          var req = getXMLHTTP();
          if (req) {
              req.onreadystatechange = function () {
                  if (req.readyState == 4) {
                      if (req.status == 200) {
                          document.getElementById('plant_subtype_div').innerHTML = req.responseText;
                      } else {
                          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                      }
                  }
              }
              req.open("GET", strURL, true);
              req.send(null);
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>That works perfectly and when I submit, values are saved in the DB and shown on a table below the form.</p>
  
  <p>Now the user wants to edit this entry, clicking on 'Edit' adjacent to the table cell with the info.</p>
  
  <p>Values for 'Plant type' and 'Plant sub-type' are passed via <code>$_POST</code> to EDIT.php.</p>
  
  <p>EDIT.php code (using Smarty tags):</p>
  
  <pre><code>&lt;select name="plant_type" onchange="getPlantSubtype('plant_subtype.php?plant_type='+this.value)"&gt;
      &lt;option selected="selected" value="{$plant_type}"&gt;
          {$plant_type}
      &lt;/option&gt;
  
      &lt;option value="" disabled="disabled"&gt;
          ---
      &lt;/option&gt;
  
      &lt;option value="1"&gt;
          Tomato
      &lt;/option&gt;
  
      &lt;option value="2"&gt;
          Carrot
      &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="plant_subtype_div"&gt;
      &lt;select name="plant_subtype"&gt;
          &lt;option selected="selected" value="{$plant_subtype}"&gt;
              {$plant_subtype}
          &lt;/option&gt;
  
          &lt;option value="" disabled="disabled"&gt;
              ---
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On EDIT.php both drop down menus show the correct values. </p>
  
  <p>But when I click on <code>Plant sub-type</code> drop down the multiple choices are not available. </p>
  
  <p>That's because the form was already pre-populated with <code>$_POST</code> and <code>onChange</code> hasn't happened yet.</p>
  
  <p>How do I make <code>Plant sub-type</code> drop down show its choices when EDIT.php is loaded? </p>