Populate Dropdown based on another Dropdown Using Ajax, jQuery and Codeigniter

Question

I just wanna ask how to populate a dropdown based on another dropdown's value.

When I select a Campaign, it will show the names of the people that are in that Campaign in another dropdown but the value must be the id of the name.

Here is my Model

function get_agents($campaign_id)
{
    $campaign_id1 = mysqli_real_escape_string($this->db->conn_id,trim($campaign_id));
    $query = $this->db->query("SELECT tbl_employee.emp_id, CONCAT(tbl_applicant.fname, ' ', tbl_applicant.lname) AS fullname FROM tbl_applicant INNER JOIN tbl_employee ON tbl_employee.apid=tbl_applicant.apid INNER JOIN tbl_account ON tbl_employee.acc_id=tbl_account.acc_id WHERE tbl_account.acc_id='".$campaign_id1."'");
    return $query->result();
}

Here is my Controller

public function getAgents()
{
   $campaign_id = $this->input->post('campaign_id');
   $this->KudosModel->get_agents($campaign_id);
   echo $result;
}

Here is my AJAX

$('#addCampaign').on('change', function(){
        $.ajax({
            type : 'POST',
            data : 'campaign_id='+ $('#addCampaign').val(),
            url : 'controller/method',
            success : function(data){
                $('#anyname').val(data);
            }
        });
    }); //I dont know what to do here

Thanks in advance guys!

You are not assigning $result to anything in your controller. — PersyJack
– PersyJack, Commented Feb 15, 2017 at 15:52
success : function(data){ console.log(data); } see what comes out in your console. — Vishal Kumar Sahu
– Vishal Kumar Sahu, Commented Feb 15, 2017 at 16:01

Veshraj Joshi · Accepted Answer · 2017-02-16 01:50:05Z

1

I think you need some manipulation in controller like-

public function getAgents()
{
   $campaign_id = $this->input->post('campaign_id');
   $employees = $this->KudosModel->get_agents($campaign_id);
   /*
   foreach($employees as $employee)
   {
       echo "<option value='".$employee->emp_id."'>".$employee->fullname."</option>"
   }*/
  // for json  
  $employeesList = [];
  foreach($employees as $employee)
  {
     array_push($employeeList,array('emp_id'=>$employee->emp_id,'fullnme'=>$employee->fullname));
  }
  echo json_encode($employeeList, JSON_FORCE_OBJECT);
}

now in ajax success function-

success : function(data){
        // anyname should be the id of the dropdown
        // $('#anyname').append(data);
        // for json 
        $json = JSON.parse(data);
        // empty your dropdown 
        $('#dropdownId').empty();
        $.each($json,function(key,value){
            $('#dropdownId').append('<option value="'+key+'">'+value+'</option>');
        })

}

edited Feb 16, 2017 at 1:50

answered Feb 15, 2017 at 16:06

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Veshraj Joshi Over a year ago

feel free to ask.. if solved please accept as correct answer

azis Over a year ago

When I try to alert the data it shows <option value='the id'>*the name*</option> but it doesnt populate the other dropdown.

Veshraj Joshi Over a year ago

what is the id of the second dropdownlist, you are close to solution, i will change my answer

azis Over a year ago

Got it bro. Turns out i placed the wrong id of the data. Haha. Thank you man! You're a blessing. I could hug you right now hahaha

Veshraj Joshi Over a year ago

you are welcome ... you can also use- $('#anyname').html(data);, every time it will remove all data and add new list

|

Nicolas · Accepted Answer · 2017-02-15 15:55:26Z

0

You can simply iterate through your data and add options to your second Select

$('#addCampaign').on('change', function(){
$.ajax({
    type : 'POST',
    data : 'campaign_id='+ $('#addCampaign').val(),
    url : 'controller/method',
    success : function(data){
        //data returns your name, iterate through it and add the name to another select
        $.each(data, function($index, $value) {
            $('#secondSelect').append($("<option></option>").val($value.id).html($value.name));
        });
    }
});
});

One thing, if you need a listener on your second <select> lets say on('click'), you need to add it back once you populated it. If not, Jquery won't recognize the new values.

Edit

Also, as @PersyJack stated, you need to asign the variable $result to something if you want to return it.

public function getAgents()
{
    $campaign_id = $this->input->post('campaign_id');
    $result = $this->KudosModel->get_agents($campaign_id);
    echo $result;
}

answered Feb 15, 2017 at 15:55

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

6 Comments

azis Over a year ago

How do I assign it to return it? Will this work? $data['agents'] = $this->KudosModel->get_agents($campaign_id); $this->load->view('kudoslist', $data);

Nicolas Over a year ago

Well yea, your method get_agents() returns your query result. But you never use them. they just stay there in the void, 'till the end of times. You need to asign them to a variable if you want to returns them to your ajax request, in your case you are returning the variable $result so you need to asign them to $result

Nicolas Over a year ago

You don't have to use a view. You need to return data to your Ajax,

azis Over a year ago

I tried what Veshraj Joshi suggested and turns out it returns this -> <option value='the id'>*the name*</option> but it doesnt populate the dropdown. Any suggestion?

Nicolas Over a year ago

well in this case, you need to remove what's inside the append() which is $("<option></option>").val($value.id).html($value.name) and the for around it and just append() the data

|

Collectives™ on Stack Overflow

Populate Dropdown based on another Dropdown Using Ajax, jQuery and Codeigniter

2 Answers 2

12 Comments

Edit

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Edit

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related