使用Ajax,jQuery和Codeigniter基于另一个Dropdown填充Dropdown

时间:2017-02-15 15:47:57

标签: javascript php jquery ajax codeigniter

我只是想问一下如何根据另一个下拉列表的值来填充下拉列表。

当我选择一个广告系列时,它会在另一个下拉菜单中显示该广告系列中的人员姓名,但该值必须是该名称的ID。

这是我的模特

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();
}

这是我的控制器

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

这是我的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

先谢谢你们!

2 个答案:

答案 0 :(得分:1)

我认为你需要在控制器中进行一些操作 -

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);
}

现在在ajax成功函数中 -

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>');
        })

}

答案 1 :(得分:0)

您可以简单地遍历数据并向第二个选择

添加选项
$('#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));
        });
    }
});
});

有一件事,如果您需要第二个<select>上的监听器,请说on('click'),您需要在填充后将其添加回来。如果没有,Jquery将无法识别新值。

修改

另外,正如@PersyJack所说,如果要返回它,你需要将变量$result设置为某个东西。

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