dynamic select option in codeigniter

Question

I am creating dependable select option in codeigniter. To populate first option was easy but i am bit troubling in displaying the second option and third option. Need help on this

My database contain:

In head table: h_id, head fields, subhead table h_id, sh_id, subhead fields and points table sh_id, points_name fields

---

controller

class Mobile extends App_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->database();
        $this->load->helper(array('url','language','form'));
        $this->load->library('form_validation');
        $this->form_validation->set_error_delimiters('<p class="text-red">', '</p>');
        $this->lang->load('auth');
        $this->load->model('mobiles_model'); 

    }
    function index()
    {
        if (!$this->data['logged_in']) 
        {
            redirect('auth/login','refresh');
        }

        $rows = $this->mobiles_model->get_users_devices();
        if ($rows) 
        {
            $this->data['devices_list'] = $rows;    
         }
        $this->_render_page('trackall', $this->data);       
    }

function _render_page($view, $data=null, $render=false)
    {

        $this->viewdata = (empty($data)) ? $this->data: $data;

        $view_html = $this->load->view($view, $this->viewdata, $render);

        if (!$render) return $view_html;
    }
}

modal

public function get_users_devices()
            {   
                $this->db->select('A.h_id as id,A.head');
                $this->db->from($this->table_head.' as A'); 
                $query = $this->db->get();
            if ($query->num_rows() > 0) {
                return $query->result_array();
            }
            return FALSE;
            }

view

<select id="head" name="head" class="form-control input-sm" onchange = "calljavascriptfunction();">
        <option value="default">--Select--</option>
        <?php if(isset($devices_list))
        foreach ($devices_list as $value) { ?>
          <option value="<?php echo $value['h_id'] ?>"><?php echo $value['head'] ?></option>
         <?php } ?>                                   
      </select>


      <select id="subhead" name="subhead" class="form-control input-sm">
        <option value="default">--Select--</option>    


      </select>

 <select id="points" name="points" class="form-control input-sm">
        <option value="default">--Select--</option>    


      </select>

---

I have to populate the other depending on what i select. i tried several methods but none of them worked. Thanks for help i am really stuck in this.

Answer 1

Suppose your you had following views loaded in HTML and you need to fetch value depending on first dropdown #head.

view code :

<select id="head">
    <option id="1"> Mobile </option>
    <option id="2"> Tabs </option>
    <option id="3"> Laptops </option>
</select>

<select id="subhead">
</select>

jquery ajax

$("#head").change(function(){

    var post_url = '<?php echo base_url() ?>mobile/getByDeviceId'
    $.ajax({
        type: "POST",
        url: post_url,
        data : { "hid" : $(this).val() },
        success: function(response){
            $.each(response, function(value, key) {
                $("#subhead").append("<option id="+value.modelId+">"+value.modelName+"</option>");
            })
        }
    });
});

controller function :

function getByDeviceId(){

    $hid = $this->input->post("hid");

    $modelList = $this->mobile_model->getByDeviceId($hid);

    echo(json_encode($modelList));
}

model function :

function getByDeviceId($hid){

    $this->db->select("modelId, modelName");
    $this->db->from("models");
    $this->db->where("hid", $hid);
    $query = $this->db->get();

    return $query->result();
}

Answer 2

Use jquery ajax() to do this, as ajax() do not disturb the current state of page and get the data from server and you can append it to the dropdown.

ajax() syntax:

$.ajax({
        url: 'process.php',                        
        type: 'POST',                                  
        data: {
            var1  :val1,
            var2  :val2
        },
        success: function(response){    // response from process
            // do your stuff here
        }
    });