CODEWITHSUNDEEP
codeigniterjquery
black_belt
black_belt

Reputation: 6799

Populating a dropdown based on the selection of another dropdown using Jquery in Codeigniter

I am using Codeigntier and I have the following dropdown in my view file which populates a list of subjects. 

<?php echo form_dropdown('subject1', $dropdown_subjects,'',
 'class="required" id="subject1"'); ?>

Now when any one selects any value from the dropdown above, I want to send the value to my controller using jquery and query in the following table( SELECT teacherid from table3 WHERE subjectid=$subjectid) to get the teacherid so that I can populate the teacherid list in another dropdown select. If any user changes his selection from the first dropdown I want to get the values of the second dropdown changed also

Table Name: table3

subjectid teacherid
  1        1001
  2        1003

So the bottom line is I want to populate a dropdown based on another dropdown. I have found couple of tutorials on this topic but I couldn't really understand those(I know I am stupid).

Would you please kindly show me how my view and controller should look like if I want to achieve this?

Thanks :)

EDit

Hi, this is how my controller and view file looks like :

My Controller

   $id= $this->input->post('subject_id'); //receiving the ajax post from view 

   $this->db->select('teachername,teacherid');
   $this->db->from('subject_teacher');
   $this->db->join('teacher', 'teacher.teacherid = subject_teacher.teacherid');
   $this->db->where('subjectid',$id);
   $records = $this->db->get('');

   $data=array();
   $data[''] = 'Select'; 
   foreach ($records->result() as $row)
    {
        $data[$row->teacherid] = $row->teachername;
    }

    return ($data); // I need help here... How to send the data as json?

My view:

   <script>
           $(function(){

                 $("#subject").change(function(){
            $.ajax({
            url: "<?echo base_url();?>mycontroller/function",
            data: {subject_id: $(this).val()},
            type: "post",
            success: function(msg){
           $("#teacher").html(); // I need help here...how do I get the value from controller and append to my another dropdown named teacher?
        })
      })


        }); // function ends here   

     </script>




  <?php echo form_dropdown('subject1', $dropdown_subjects,'',
   'class="required" id="subject1"'); ?>



   <select name="teacher" id="teacher">
    <option value="">Select</option>
  </select>

Please make the necessary changes in my View and Controller for me.

Thanks in Advance :)

Upvotes: 0

Views: 5419

Answers (2)

uttam
uttam

Reputation: 589

You can do this by using jquery ajax. First you post subject_id to ajax page, ajax page will return the list of teacher in combo box and then the result is populated in the first page.

$("#subject").change(function(){
    $.ajax({
        url: "your-ajax-page-url",
        data: {subject_id: $(this).val()},
        type: "post",
        success: function(msg){
        $("#teacher").html();
    })
})

This is the edited controller

   $id= $this->input->post('subject_id'); //receiving the ajax post from view 

   $this->db->select('teachername,teacherid');
   $this->db->from('subject_teacher');
   $this->db->join('teacher', 'teacher.teacherid = subject_teacher.teacherid');
   $this->db->where('subjectid',$id);
   $records = $this->db->get('');

   $output = null; 
   foreach ($records->result() as $row)
    {
        $output .= "<option value='".$row->teacherid."'>".$row->teachername."</option>";
    }

    echo $output; // HTML example

Upvotes: 3

Zaher
Zaher

Reputation: 1150

you may do it like this :

you will have to create a function inside your controller which will populate the data but instead of outputting your view you will have to put it inside a var like this

$outout = $this->load->view('myselect_output',$data,TRUE);

and then in your main view you will have to manipulate the DOM with jquery or any other js library ..

Upvotes: 0

Related Questions