title: How to display AJAX results in a HTML drop down menu
body: <p>I am creating a few drop down menus that populate depending on the previous drop down value selected.</p>
  
  <p>So far I am able to successfully use ajax to grab data from the php script, however, I am not sure how to append that data to the second drop down called AREAS.</p>
  
  <pre><code>HTML / Javascript / AJAX
      &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;IPSLA Report&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
      function changeSelections() {
        var departments = document.selections.department;
        var areas = document.selections.areas;
        var months = document.selections.months;
        var years = document.selections.years;
        var s = document.getElementById("department");
  
        switch(departments.selectedIndex) {
          case 0:
            areas.options.length = 0;
            months.options.length = 0;
            years.options.length = 0;
  
            areas.options[0] = new Option("Select an Area");
            months.options[0] = new Option("Select a Month");
            years.options[0] = new Option("Select a Year");
            departments.options[0].selected = true;
            break;
  
          default:
            months.options.length = 0;
            years.options.length = 0;
  
            months.options[0] = new Option("Select a Month");
            years.options[0] = new Option("Select a Year");
  
            var pass = s.options[s.selectedIndex].text;
            ajaxFunction(pass);
        }
  
      }
  
  
      function ajaxFunction(pass) {
  
      var ajaxRequest;
        try {
           ajaxRequest = new XMLHttpRequest();
        }
        catch(e) {
          try {
            ajaxRequest = new ActiveXObjext("Msxml2.XMLHTTP");
          }
          catch(e) {
            try {
              ajaxRequest = new ActiveXObjext("Microsoft.XMLHTTP");
            }
            catch(e) {
              alert("Please use another browser");
              return false;
            }
          }
        }
        ajaxRequest.onreadystatechange = function() {
          if (ajaxRequest.readyState == 4) {
            var ajaxDisplay = document.getElementById("areas");
            if (ajaxDisplay != null) {
            ajaxDisplay.options.selectedIndex.text = ajaxRequest.responseText;
            }
            else {
              document.write("NULL!!!");
            }
          }
        }
  
        if (pass == "CRAN") {
          var active_id = '0';
        }
  
        var queryString = "?active_id=" + active_id;
        ajaxRequest.open("GET","db_connect.php" + queryString, true);
        ajaxRequest.send(null);
  
      }
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="wrapper"&gt;
        &lt;div id="select"&gt;
          &lt;form name="selections" id="selections" action=""&gt;
            &lt;select name="department" id="department" onChange="changeSelections()"&gt;
              &lt;option value="none"&gt;Select Department&lt;/option&gt;
              &lt;option value="none"&gt;CRAN&lt;/option&gt;
              &lt;option value="none"&gt;BackBone&lt;/option&gt;
              &lt;option value="none"&gt;Datacenter&lt;/option&gt;
              &lt;option value="none"&gt;Enterprise&lt;/option&gt;
            &lt;/select&gt;
  
  
            &lt;select name="areas" id="areas" onChange="changeMonth()"&gt;
              &lt;option value="none"&gt;Select an Area&lt;/option&gt;
            &lt;/select&gt;
  
            &lt;select name="months" id="months" onChange="changeYear()"&gt;
              &lt;option value="none"&gt;Select a Month&lt;/option&gt;
            &lt;/select&gt;
  
            &lt;select name="years" id="years" onChange="go(this)"&gt;
              &lt;option value="none"&gt;Select a Year&lt;/option&gt;
            &lt;/select&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
  
        &lt;div id="image"&gt;
  
        &lt;/div&gt;
  
  
        &lt;div id="incidents"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  PHP Script
  &lt;?php
    $host = "";
    $dbName = "";
    $username = "";
    $password = "";
  
    $conn = mysql_connect($host,$username,$password);
    $db = mysql_select_db($dbName,$conn);
  
    $dept_id = $_GET['id'];
  
    $area_query = "SELECT area_name FROM incident_area WHERE FK_dept= '$dept_id'";
    $area_result = mysql_query($area_query);
  
   $options = "";
    while ($area_row = mysql_fetch_assoc($area_result)) {
       #$options .= '&lt;option value="'.$area_row['area_name'].'"&gt;'.$area_row['area_name'].'&lt;/option&gt;';
        $options .= $area_row['area_name'];
    }
   echo $options;
  
  ?&gt;
  ~
  </code></pre>
  
  <p>So, basically I just need to know how to append the values gathered by AJAX to the drop down menu "areas".</p>