title: AJAX - select field population with multiple values
body: <p>I have a form where the user can select ONE specific problem from a list of 100 problems. Once the <code>&lt;Select id="problem"&gt;</code> field is updated, the below MySQL query is launched via AJAX.</p>
  
  <pre><code>if(isset($_POST['action']) &amp;&amp; ($_POST['action']=='problem_lookup')) {
  
      if(isset($_POST['problem'])) {
  
          // Start MySQLi connection
          include 'connect_db.php';
          $db = new mysqli($dbhost,$dbuser,$dbpass,$dbname);
  
          // display error if connection cannot be established
          if($db-&gt;connect_errno &gt; 0){
          die('Unable to connect to database [' . $db-&gt;connect_error . ']'); }
  
          // run query
          $sql = "SELECT Category, Department_Responsible, Alert, Experience FROM qci_problems_index_new WHERE Issue='".$_POST['problem']."' GROUP BY Issue";
          $result = $db-&gt;query($sql) or die(mysqli_error($db));
  
          // return data as array
          $array = mysqli_fetch_array($result);
          echo json_encode($array);
      }
  
  } 
  </code></pre>
  
  <p>the query returns several values which are each populated into individual <code>&lt;select&gt;</code> field in the form, the only exception is the <code>&lt;select id="alert-dept" multiple&gt;</code> field which can have multiple values and that's where the problem is.</p>
  
  <p>Right now, all fields except <code>alert-dept</code> are populated with one specific value as intended, but in case the query returns 2 or more values, the field remains empty. I figure I have to use a <code>foreach()</code> equivalent for JavaScript when populating the field via AJAX, but am lost there as I dont know how to do that.</p>
  
  <p>Here the code I use to populate the form fields with the query result.</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;                                                 
  $(function () {
      $('#problem').change(function () {                      // on change in field "problem"
  
          $.ajax({                                            // launch AJAX connection
              type: 'POST',                                   // via protocol POST
              url: '../../plugins/MySQL/ajax_action.php',
              data: { action: 'problem_lookup' , problem: $("#problem").val() },
              dataType: 'json',                               // encode with JSON
              success: function (data)
              {
                  var data0 = data[0];                            // assign row[0] result to variable = Problem Category
                  var data1 = data[1];                            // assign row[1] result to variable = Dept Responsible
                  var data2 = data[2];                            // assign row[2] result to variable = Alert
                  var data3 = data[3];                            // assign row[3] result to variable = Experience
  
                  $('#problem_category').val(data0);              // insert result into field
                  $('#department').val(data1);                    // insert result into field
                  $('#alert_dept').val(data2);
                  $('#experience').val(data3);
  
                  $('#problem_category').trigger('change');       // refresh select field via trigger('change') to show the result
                  $('#department').trigger('change'); 
                  $('#alert_dept').trigger('change'); 
                  $('#experience').trigger('change'); 
              },
          });
      });
  
  });
  </code></pre>