title: Dynamic Dependent Select Box using jQuery and PHP Issues
body: <p>This is for a University project.
  I'm trying to create four select boxes which are Country, State, City and Course with three being dependent on the choice of another. The selected choice will then affect the query that will be executed to then populate the select box. It works fine for the first select box but my third, which is city does not seem to work at all when a state is chosen.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select name="country" id="countryID" onchange="selectDynamics()" class="searchbox-select&gt;
  &lt;option value=""&gt;Country&lt;/option&gt;
  &lt;?php
  while($row = $result-&gt;fetch_assoc()){
  $count=$row['country];
  echo '&lt;option value="'.$count.'"&gt;'.$count.'&lt;/option&gt;;
  ?&gt;
  &lt;/select&gt;
  &lt;select name ="state" id="stateID" onchange="selectDynamics()"class="searchbox-select"&gt;
  &lt;option value=""&gt;State&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="city" id="cityID" class="searchbox-select"&gt;
  &lt;option value=""&gt;City&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="course" id="courseID" class="searchbox-select"&gt;
  &lt;option value=""&gt;Course&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function () {
  $("#countryID").change(function () {
      var country = $(this).val();
      var dataString = 'country=' + country;
      $.ajax
                  ({
                      type: "POST",
                      url: "getStates.php",
                      data: dataString,
                      cache: false,
                      success: function (html) {
                          $("#stateID").html(html);
                      }
                  })
  })
  
  $("#stateID").change(function () {
      var state = $(this).val();
      var dataString = 'state=' + state;
      $.ajax
      ({
          type: "POST",
          url: "getCities.php",
          data: dataString,
          cache: false,
          sucess: function (html)
          {
              $("#cityID").html(html);
          }
      })
  })
  })
  </code></pre>
  
  <p><strong>getCities.php</strong></p>
  
  <pre><code>&lt;?php
  include "dbOpen.php";
  
  if($_POST['state'])
  {
      $state=$_POST['state'];
      $result2 = $conn-&gt;query("select distinct city from ADDR where province='$state' order by city");
      echo '&lt;option value=""&gt;City&lt;/option&gt;';
      while($row = $result2-&gt;fetch_assoc())
      {
          $city=$row['city'];
          echo '&lt;option value="'.$city.'"&gt;'.$city.'&lt;/option&gt;';
      }
  }
  ?&gt;
  </code></pre>
  
  <p><strong>getStates.php</strong></p>
  
  <pre><code>&lt;?php
  include "dbOpen.php";
  
  if($_POST['country'])
  {
      $country=$_POST['country'];
      $result2 = $conn-&gt;query("select distinct province from ADDR where country='$country' order by province");
      echo '&lt;option value=""&gt;Country&lt;/option&gt;';
      while($row = $result2-&gt;fetch_assoc())
      {
          $state=$row['province'];
          echo '&lt;option value="'.$state.'"&gt;'.$state.'&lt;/option&gt;';
      }
  }
  ?&gt;
  </code></pre>
  
  <p>I can't really figure out why it isn't working and any help would be appreciated. Also I know my sql code is not protected against SQL injection very well but for now I just want to </p>