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

Question

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

当我选择一个广告系列时，它会在另一个下拉列表中显示该广告系列中人员的姓名，但值必须是名称的 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

提前谢谢各位！

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

}

Answer 2

您可以简单地遍历您的数据并将选项添加到您的第二个 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));
        });
    }
});
});

有一件事，如果您需要第二个<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;
}