title: How to populate select dropdown based on first select dropdown
body: <p>I have read many different articles on this including <a href="https://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html" rel="nofollow noreferrer">https://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html</a> and <a href="http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/" rel="nofollow noreferrer">http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/</a></p>
  
  <p>But it is not working for me, and I do not know why.</p>
  
  <p>HTML</p>
  
  <pre><code>div class="col-sm-6"&gt;
                          &lt;label for="selectComplvl" class="regions" &gt;Region&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;
                        &lt;select class="form-control levelbox" id="region" value="" name="region"&gt;
                          &lt;option value="base"&gt;---Select---&lt;/option&gt;
                          &lt;?php
                            $region_sql = "SELECT * FROM `regions`";
                            $region_res = mysqli_query($con, $region_sql);
                            if(mysqli_num_rows($region_res) &gt; 0){
                               while($region_row = mysqli_fetch_array($region_res)){
                                    echo "&lt;option value='".$region_row[id]."'&gt;".$region_row[region]."&lt;/option&gt;";
                                } 
                            }
  
                          ?&gt;
  
                        &lt;/select&gt;
                        &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group col-sm-3"&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;label for="compEntered" class="comp"&gt;compeition Entered&lt;/label&gt;&lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;
                        &lt;select class="form-control" id="compEntered" name="compEntered"&gt;
                          &lt;option value="base"&gt;Please choose a Region&lt;/option&gt;
  
                        &lt;/select&gt;
                        &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>getcomp.php</p>
  
  <pre><code>&lt;?php
  if($_POST['id'])
  {
  $id=$_POST['id'];
  $sql=mysqli_query("select * from comp_entered where region_id='$id'");
  while($row=mysqli_fetch_array($sql))
  {
      echo '&lt;option value="'.$row['region_id'].'"&gt;'.$row['comp_entered'].'&lt;/option&gt;';
  }
  }
  ?&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){ 
  $("#region").change(function()
  
                                               {
                              var id=$(this).val();
                              var dataString = 'id='+ id;
                              $.ajax
                              ({
                                  type: "POST",
                                  url: "getcomp.php",
                                  data: dataString,
                                  cache: false,
                                  success: function(html)
                                  {
                                      $("#compEntered").html(html);
                                  }
                              });
                          });
  });
  </code></pre>
  
  <p>TABLE regions</p>
  
  <p>| <strong>id</strong> |     <strong>region</strong>  |     </p>
  
  <p>| 1  | mid ameria    |</p>
  
  <p>| 2  | mid atlantic  |</p>
  
  <p>| 3  | sounthern usa |</p>
  
  <p>TABLE comp_entered</p>
  
  <p>| <strong>id</strong> | <strong>region_id</strong> | <strong>comp_entered</strong> |</p>
  
  <p>| 1  | 1 | compA |</p>
  
  <p>| 2  | 1 | compB | </p>
  
  <p>| 3  | 2 | comp C |</p>
  
  <p>| 4  | 2 | compD  |</p>
  
  <p>| 5  | 3 | comp E |</p>
  
  <p>| 6  | 3 | comp F |</p>
  
  <p>what is wrong with my code? What is the best way to make this work?</p>