title: Populating dropdown menu after ajax call
body: <p>I am aware that AJAX works asynchronously (that is what the “A” stands for). I moved all the code that depends on the result of the AJAX call inside the success callback. However after the call is being made, I am not getting the select dropdwon box to populate with any data. How can I populate the select dropdown menu after the ajax call?</p>
  
  <p>Jquery/Ajax</p>
  
  <pre><code>&lt;script&gt;
  function showFields(option){  
      var content = '';
      for (var i = 1; i &lt;= option; i++){
  
      function addNewCourse() {
      var data;
        $.ajax({
           type: "POST",
           url: "coursesOffered.php",
           data: { value : option},
           success: function(data){
              //alert(data);
              //console.log(data);
              content += '&lt;select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list"&gt;&lt;option value="" &gt;--- Select ---&lt;/option&gt;"';
              content += data;
              content += '&lt;/select&gt;&lt;/br&gt;';
           }
          });
      }                  
      addNewCourse();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>coursesOffered.php</p>
  
  <pre><code>try {
      $db_con = new PDO($dsn, $user, $password);
      $db_con-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  } catch (PDOException $e) {
      echo 'Connection failed: ' . $e-&gt;getMessage();
  } 
  $course_query = $db_con-&gt;prepare("SELECT course_id, course_name FROM courses_selection_list;");
  $course_query-&gt;execute();
  $data = $course_query-&gt;fetchAll();
  foreach ($data as $row){
      //dropdown values pulled from database
      echo '&lt;option value="' . $row['course_id'] . ':'.$row['course_name'].'"&gt;' . $row['course_name'] . '&lt;/option&gt;';
  }
  </code></pre>