Populating select box depending on above select box selected in codeigniter

Question

I a form where state is populated in select box from db, and based on state selection city must be popualted in below select box. Can any one help me on this how can i do this using codeigniter.I tried ajax way but it's not working 'undefined'.

function get_city(){
var state=$("#state").val();
var dataString = 's_id='+ state;
var url="<?php echo base_url()?>admin/home/get_city";


$.ajax({
    type:"POST",
    url:url,
    data:dataString,
    success:function(data){

       $("#city").html(data);
   }
});

}

Controller:

function get_city(){


    $this->load->model('data_model');
    $data['records']=$this->data_model->get_cities();

    return $data['records'];

}

Model:

    function get_cities(){

    $this->db->select('id','city');
    $this->db->from('cities');
    $this->db->where('s_id', $this->uri->segment(4));

    $query=$this->db->get();
    if($query->num_rows()>0){
        foreach($query->result() as $row){
            $data[]=$row;

        }
        return $data;
    }
}

I need help on this

Answer 1

Controller

function get_city(){

    $this->load->model('data_model');
    $records = $this->data_model->get_cities();
    $city_html = '';
    foreach ($records as $row) {
     $city_html .= '<option value="'. $row['id'] .'">'. $row['city'] .'</option>'; 
    }
    echo $city_html;
    exit;

}

Answer 2

You're actually better using JSON for this type of thing:

Action:

function get_cities() {
    // Load your model.
    $this->load->model('data_model');
    // Get the data.
    $cities = $this->data_model->get_cities();
    // Specify that we're returning JSON.
    header('content-type: application/json');
    // Return a JSON string with the cities in.
    return json_encode(array('Cities' => $cities));
}

Javascript:

$('#state').change(function()) {
    // Get an instance of the select, and it's value.
    var state = $(this),
        stateID = state.val();
    // Add if statement to check if the new state id
    // is different to the last to prevent loading the same
    // data again.

    // Do the Ajax request.
    $.ajax({
        url : '/path/to/get_cities', // Where to.
        dataType : 'json', // Return type.
        success : function(data) { // Success :)
            // Ensure we have data first.
            if(data && data.Cities) {
                // Remove all existing options first.
                state.find('option').remove();
                // Loop through each city in the returned array.
                for(var i = 0; i <= data.Cities.length; i++) {
                    // Add the city option.
                    state.append($('option').attr({
                        value : data.Cities[i].value
                    }).text(data.Cities[i].city));
                }
            }
        },
        error : function() {
            // Do something when an error happens?
        }
    });
});

The above code will simply return the list of cities, as an JSON object, ie

{Cities:[{id:1,city:'London'},{id:2,city:'Paris'}]}

When jQuery gets hold of it, it will convert it back into an array, which you can then access via data.Cities[0].city where data is the object returned by the jQuery success callback.

You "could" pre-process the cities into HTML and return that, however that can't be reused else where, so you're better off making it portable by returning JSON.

Hope this helps :)