使用AJAX的从属下拉选择代码点火器

Question

Im trying to get houses to be filled on the second dropdown from their respective estates selected in the first drop down. Im getting no results in the second dropdown. If i dump the results like var_dump($estates->house_number); i get house number G3 meaning there are some results. but now this is not being sent with the <option class="text-uppercase" value="' . $estates->house_id . '"> ' . $estates->house_number . '</option>; <option class="text-uppercase" value="' . $estates->house_id . '"> ' . $estates->house_number . '</option>; to the view

This is the HTML:

<div class="col-sm-4 col-xs-12">
   <div class="form-group drop-custum">
       <select id="estate" name="estate" data-live-search="true" class="form-control show-tick" onchange="get_houses(this.value)">
          <option value="">-- Estate --</option>
          <?php
           $sql = $this->db->query("select * from estates ORDER BY estate_name asc");
           $result = $sql->result();
           foreach ($result as $estates):
          ?>
            <option class="text-uppercase" value="<?= $estates->estate_name?>"> <?= $estates->estate_name?></option>
         <?php endforeach; ?>
        </select>
    </div>
</div>
<div class="col-sm-4 col-xs-12">
    <div class="form-group drop-custum">
        <select name="house" data-live-search="true" id="house" class="form-control show-tick">
          <option value="">-- House --</option>
        </select>
    </div>
</div>

This is the AJAX:

function get_houses()
{
 $.ajax({
    url:"fill_houses/",
    type:"POST",
    data:'estate_name='+val,
    success:function(data)
    {
        $("#house").html(data);
        alert('success');
    }
 }); 
}

This is the PHP:

public function fill_houses()
{
    $query = $this->db->query("select * from houses where estate_name='" . $this->input->post('estate_name', true) . "' order by house_number asc ");
    $result = $query->result();

    foreach ($result as $estates) {
        var_dump($estates->house_number);

        //dump returns house number G3, meaning results are there

        $rslt =  '<option class="text-uppercase" value="' . $estates->house_id . '"> ' . $estates->house_number . '</option>';
        return $rslt;
        //this return doestnt populate the view for <select name="house"  id="thishouse"></select>
    }

}

Answer 1

Check with this ajax function:

function get_houses(val)
{
   $.ajax({
      url:"<?php echo base_url(); ?>fill_houses",
      type:"POST",
      dataType:"json",
      data:'estate_name='+val,
      success:function(data)
      {
         $("#house").html(data);
         alert('success');
      }
   });

}   

Controller:

public function fill_houses()
{
$query = $this->db->query("select * from houses where estate_name='" . $this->input->post('estate_name', true) . "' order by house_number asc ");
$result = $query->result();

foreach ($result as $estates) {
    var_dump($estates->house_number);

    //dump returns house number G3, meaning results are there

    $rslt[] = '<option class="text-uppercase" value="'.$estates['house_id'].'">'.$estates['house_number'].'</option>';

    //this return doestnt populate the view for <select name="house"  id="thishouse"></select>
}
echo json_encode($rslt);

}