title: Using Ajax To Populate A Select Box
body: <p>Ok, this is my very first attempt at Ajax and its driving me insane as I really cant get my head round it. What im trying to do is populate the first box with the customers from the database, and then use the customerID to select all the vehicleID's from the database using the select.php script.
  What is happening is the customers box is getting selected but when the select a customer nothing happens.</p>
  
  <p>This is my Test.php file :</p>
  
  <pre><code>&lt;?php include 'connectmysqli.php'; ?&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Select test&lt;/title&gt;
          &lt;script src="./js/jquery/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
              $$('#customer')
                  .on('change', function () {
                      $.getJSON('select.php', { customerId: $(this)
                              .val() }, function (data) {
  
                          var options = '';
                          for (var x = 0; x &lt; data.length; x++) {
                              options += '&lt;option value="' + data[x][
                                      'id'] + '"&gt;' + data[x]['reg'] +
                                  '&lt;/option&gt;';
                          }
                          $('#vehicle')
                              .html(options);
                      });
                  });
  
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;select id="customer"&gt;
                  &lt;?php
          $sql = &lt;&lt;&lt;SQL
          SELECT *
          FROM `customers`
          SQL;
          if(!$result = $db-&gt;query($sql)){ die('There was an error running the query [' . $db-&gt;error . ']');}
          while($row = $result-&gt;fetch_assoc()){
          if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}else
          {$name = $row['bussinessname'];}
          echo '&lt;option value="'.$row['customerID'].'"&gt;'.$name.'&lt;/option&gt;';
          }
          echo '&lt;/select&gt;&lt;/p&gt;'; ?&gt;
          &lt;/select&gt;
          &lt;select id="vehicle"&gt;
                  &lt;/select&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my select.php file :</p>
  
  <pre><code>&lt;?php include 'connectmysqli.php'; ?&gt;
  &lt;?php
          $id = $_GET['customerId'];
          $sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id;
          $result = $db-&gt;query($sql);
  
          $json = array();
          while ($row = $result-&gt;fetch_assoc()) {
            $json[] = array(
              'id' =&gt; $row['vehicleID'],
              'reg' =&gt; $row['reg'] // Don't you want the name?
            );
          }
          echo json_encode($json);
  
  ?&gt;
  </code></pre>
  
  <p>I am attempting to mod this tutorial to work with the databases but so far i'm unsuccessful.
  <a href="http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/" rel="nofollow">http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/</a></p>
  
  <p>In the Chrome console I get the error :</p>
  
  <pre><code>Port error: Could not establish connection. Receiving end does not exist.     miscellaneous_bindings:235
  chromeHidden.Port.dispatchOnDisconnect
  </code></pre>