AJAX how to change select values based from database

Question

I am trying to change select's values from database but only get one return form Foreachmethod. I don't know the right method for this case. I want a result something like this http://jsfiddle.net/YPsqQ/ , but the data is from database. The problem is how to parse all data to view. Not just one. Maybe some looping on Jquery ? but I don't know how to do that. Here are the codes, I am using Codeigniter by the way.

Controller

public function prodi_pindah()
    {

    if (!$this->login and !$this->admin){
         redirect('akademik/logout');
     }
     else
     {
        $this->load->model('mahasiswa_model');  
        $this->mahasiswa_model->prodi_pindah();
}

View

<input type="text" name="ptasal" id="ptasal" class="addresspicker" /> // this input has jquery Autocomplete , 
 <input type="hidden" name="id_pt_asal" id="id_pt_asal" /> // this input has ID that sent to model, this ID change whenever ptasal change too
 <select name="id_prodi_asal" id="id_prodi_asal" style="">
<option value="">-- Pilih Program Studi--</option>
</select> 

<script>
        $(document).ready(function(){
    $("#id_prodi_asal").click(function(event){
     var formData = {
            'id_pt_asal': $('input[name=id_pt_asal]').val()
        };
        $.ajax({
            type: 'POST',
            url: '<?=base_url()?>akademik/prodi_pindah',
            data: formData,
            dataType: 'json',
            encode: true
        })    
        .done(function(data) {
            console.log(data);



        if (data.hasil_prodi==true)
            {


            }   

        if (data.hasil_prodi==false)
            {


            }
        })
    event.preventDefault();

    });
});
</script>

Model

public function prodi_pindah()
    {


        $id_pt_asal = $this->input->post('id_pt_asal');

            $kue_prodi = $this->db->query("SELECT
            ps.nama_perguruan_tinggi,
            ps.nama_program_studi,
            ps.`status`,
            rjp.nm_jenj_didik,
            ps.nama_jenjang_pendidikan,
            ps.id_prodi
            from ref_prodi ps
            INNER JOIN ref_jenjang_pendidikan rjp ON ps.id_jenjang_pendidikan=rjp.id_jenj_didik
            WHERE status = 'A' AND id_perguruan_tinggi = '$id_pt_asal'

            ");

        foreach ($kue->result() as $row){
        $value = $row->id_prodi;
        $isi = $row->nama_jenjang_pendidikan.' - '.$row->nama_program_studi;                                 
        $has = '<option value='.$value.'>'.$isi.'</option>';

        }

        $data['html']="<option value=''>-- Pilih Program Studi--</option>$has"; // I want $has had all result, not just one. Here the problem.
        $data['hasil_prodi']=TRUE;
        echo json_encode($data);

    }

Answer 1

Please fine below mentioned solution. With this you will learn looping in jQuery and manipulate data from Database to Html.

Your controller function will look like below.

public function prodi_pindah() {
    if (!$this->login and ! $this->admin):
        redirect('akademik/logout');
    else:
        $this->load->model('mahasiswa_model');
        $kue = $this->mahasiswa_model->prodi_pindah();
        if ($kue):
            $data['status'] = true;
            $data['records'] = $kue;
        else:
            $data['status'] = false;
        endif;
        echo json_encode($data);
    endif;
}

Your model will look like something below.

public function prodi_pindah()
{
    $id_pt_asal = $this->input->post('id_pt_asal');
    $this->db->select('ps.nama_perguruan_tinggi,ps.nama_program_studi,ps.status,rjp.nm_jenj_didik,ps.nama_jenjang_pendidikan,ps.id_prodi');
    $this->db->from('ref_prodi as ps');
    $this->db->join('ref_jenjang_pendidikan as rjp','ps.id_jenjang_pendidikan = rjp.id_jenj_didik');
    $this->db->where('ps.status','A');
    $this->db->where('ps.id_perguruan_tinggi',$id_pt_asal);
    $query = $this->db->get('ref_prodi as ps');
    return $query->result()
}

And finally your view part will like describe below.

$(document).on('#id_pt_asal', 'change', function() {
    var id = $('#id_pt_asal').val();
    $.ajax({
        type: 'POST',
        url: '<?=base_url('akademik/prodi_pindah')?>',
        data: {id_pt_asal: id},
        dataType: "json",
        beforeSend: function() {
            $('#id_prodi_asal')
                    .empty()
                    .append('<option selected="selected">-- Pilih Program Studi--</option>');
        },
        success: function(data) {
            if (data.status) {
                $.each(data.records, function(i, item) {
                    $('#id_prodi_asal').append($('<option>', {
                        value: item.id_prodi,
                        text: item.nama_jenjang_pendidikan + item.nama_program_studi
                    }
                    ));
                });
            } else {
                $('#id_prodi_asal')
                    .empty()
                    .append('<option selected="selected">-- Pilih Program Studi--</option>');
            }
        }
    });
});

So here is the final code for your requirement. Let me know if it not works.

Answer 2

Ok so you are breaking some MVC rules here which is contributing to your confusion. I'll clarify below.

Model: Deals with database logic, one model can be shared by many controllers.
View: Where your html is (which could include php variables if you aren't using js).
Controller: Where the logic for your php is. e.g. Mapping an array for your view, going to a different page etc.

I've changed your code below to put your controller and model code in the correct place. Also your issue was is that you weren't adding the option string onto the previous option string. I've commented where I've changed code.

Controller

public function prodi_pindah()
{

 if (!$this->login and !$this->admin){
     redirect('akademik/logout');
 }
 else
 {
    $this->load->model('mahasiswa_model');  
    $kue = $this->mahasiswa_model->prodi_pindah();

    //Set the $has variable first so that we can append to it.
    $has = '';
    foreach ($kue as $row){
      $value = $row->id_prodi;
      $isi = $row->nama_jenjang_pendidikan.' - '.$row->nama_program_studi;
      // Now correctly appends $has variable                               
      $has .= '<option value='.$value.'>'.$isi.'</option>';
    }
    // Now correctly adds $has
    $data['html']="<option value=''>-- Pilih Program Studi--</option>" . $has; 
    $data['hasil_prodi']=TRUE;
    echo json_encode($data);
  }
}

Model

public function prodi_pindah()
{
    $id_pt_asal = $this->input->post('id_pt_asal');

    $kue_prodi = $this->db->query("SELECT
      ps.nama_perguruan_tinggi,
      ps.nama_program_studi,
      ps.`status`,
      rjp.nm_jenj_didik,
      ps.nama_jenjang_pendidikan,
      ps.id_prodi
      from ref_prodi ps
      INNER JOIN ref_jenjang_pendidikan rjp ON 
      ps.id_jenjang_pendidikan=rjp.id_jenj_didik
      WHERE status = 'A' AND id_perguruan_tinggi = '$id_pt_asal'
    ")->result();
    return $kue_prodi;
}`

Answer 3

You can use this code and modify according to your need . I have made this code using your example . You just want to return a list of HTML options dynamically from PHP function

$(document).ready(function(){
    $('#type').on('change',function(){
        var itemId = $(this).val();
        if(itemId){
            $.ajax({
                type:'POST',
                url:'<?=base_url()?>akademik/prodi_pindah',
                 data:'itemId='+itemId,
                success:function(response){
                var html= response.html;
                   html= '<option value="">Select state</option><option value="543">Alger</option><option value="544">Annaba</option><option value="546">Béchar</option><option value="547">Béjaïa</option><option value="545">Batna</option><option value="548">Biskra</option><option value="549">Blida</option><option value="550">Chlef</option><option value="551">Constantine</option><option value="552">Ghardaïa</option><option value="553">Mostaganem</option><option value="554">Oran</option><option value="555">Sétif</option><option value="556">Sidi Bel Abbès</option><option value="557">Skikda</option><option value="558">Tébessa</option><option value="559">Tiaret</option><option value="560">Tlemcen</option>'
                   
                    $('#size').html(html);
                    
                }
            }); 
        }else{
            $('#item').html('<option value="">Select Item first</option>');
            $('#size').html('<option value="">Select Size</option>'); 
        }
    });
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
    <option value="item1Id">item1</option>
    <option value="item2Id">item2</option>
    <option value="item3Id">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>