尝试使用AJAX动态填充第二个下拉列表时遇到问题

Question

i am trying to populate second dropdown based on the selected option of 1st dropdown but i am unable to do so i dont know what i am doing wrong but something is wrong all my endeavors to achieve my desired results are dashed to the ground cuz its not working kindly help me so far i have done this....

<select name="ddl_company" size="1"  class="form-control" id="ddl_company"  onchange="getId(this.value);">
  <option value="">Select Company</option>   
  <?php
  //Getting Company name from mysql and displaying it in the 1st dropdown having id ddl_company
  $query = mysql_query("select * from company where company_status='Active'order  by company_name asc");
  while ($r = mysql_fetch_array($query)) {
    if ($r['company_id'] == $ddl_company) {
      echo "<option selected value=$r[company_id]>$r[company_name]</option>" . "<BR>";
    } else {
      echo "<option value=$r[company_id]>$r[company_name]</option>";
    }
    // second drop down list which is going to fetch data from mysql db   based on the selected option of 1st dropdown
    ?>
    <select name="ddl_dept" size="1"  class="form-control" id="ddl_dept">    
      <option value=""></option>            
    </select>

    //ajax implementation of 2nd dropdown

    <script type="text/javascript">
      function getId(val)
      {
      $.ajax({
          type:"POST",
          url:"getdata.php",
          data:"company_id="+val,
          success:function(data)
          {
              $('#ddl_dept').html(data);
          }

      });
      }
    </script>

finally get_data.php file

    <?php
    include("../newconfig.php");
    if (!empty($_POST['company_id'])) {
      $company_id = $_POST['company_id'];
      $query = "select * from department where department_status='Active'LIMIT 1 AND company_id='$company_id'LIMIT 1";
      $sqlquery = mysql_query($query);
      while ($r = mysql_fetch_array($sqlquery)) {
  # code...
        if ($r['company_id'] == $company_id) {
          echo "<option selected value=$r[department_id]>$r[department_name]</option>" . "<BR>";
        } else {
          echo "<option value=$r[department_id]>$r[department_name]</option>";
        }
      }
    }
  }
?>

I have done all this yet its not working kindly help me i shall be very thankful. btw thats my output click this to show the result

Answer 1

Try something like this : jquery

$("select#ddl_dept").on('change',function(){
    var selected = $('#ddl_company option:selected').text();
   getId(selected );
});