Codeigniter与AJAX动态相关的下拉列表

Posted 2021-03-27

你能检查我哪里出错吗？

看起来第三个下拉列表没有从数据库中获取数据。确切的问题是来自Users模型的模型方法get_by_ocp_id($ocp_id)没有从第二个下拉列表中获取id。我从youtube上的教程中获取了这段代码：https://www.youtube.com/watch?v=QTfPlTCsVME&t=823s。这只有一个依赖，我需要2。

控制器：

public function details($service_tag){
        $data['page_title'] = $service_tag . " ";   

        //Allocate
        //load all departments for allocation
        $data['departments'] = $this->Department->get_all();

        $this->load->view('staff/workstations/details', $data);
    }

    public function get_occupations(){
        $dep_id = $this->input->post('dep_id');
        $occupations = $this->Occupation->get_by_dep_id($dep_id);
        $queries = $this->db->queries;

        if(count($occupations)>0){
            $ocp_select = "";
            $ocp_select .= '<option value="">Choose Occupation </option>';
            foreach($occupations as $occupation){
                $ocp_select .= '<option value="'.$occupation->ocp_id.'">'.$occupation->ocp_name.'</option>';
            }
            echo json_encode($ocp_select);          
        }       
    }

    public function get_users(){        
        $ocp_id =$this->input->post('ocp_id');  
        echo "ID este: " . $ocp_id  ;
        $users = $this->User->get_by_ocp_id($ocp_id);               
        if(count($users)>0){
            $usr_select = "";
            $usr_select .= '<option value="">Choose User</option>';
            foreach($users as $user){
                $usr_select .= '<option value="'.$user->fmid.'">'.$user->first_name.' '.$user->last_name.'</option>';
            }
            echo json_encode($usr_select);
        }       
    }

模型：

    //Occupation model
    public function get_by_dep_id($dep_id){
            $this->db->select('*');
            $this->db->from('occupations');
            $this->db->where("dep_id='" . $dep_id . "'");
            $query = $this->db->get();

            return $result = $query->result();
        }
//User Model
public function get_by_ocp_id($ocp_id){
        $this->db->select('*');
        $this->db->from('users');
        $this->db->where("ocp_id='" . $ocp_id . "'");
        $query = $this->db->get();

        return $result = $query->result();
    }

视图：

<?php echo form_open('workstation/wrk_allocate', 'class="col-12 col-md-8"');  ?>
    <div class="form-group row">
        <label for="department" class="col-sm-4 col-form-label h3">Choose Department</label>
        <div class="col-sm-4">
            <select class="form-control" id="department" name="department">
                <option value="">Choose Department</option>
                <?php
                    foreach($departments as $department) {
                     echo '<option value="'. $department->dep_id .'">'. $department->dep_name . '</option>';
                    }
                ?>              
            </select>
        </div>  
    </div>

    <div class="form-group row">
        <label for="department" class="col-sm-4 col-form-label h3">Choose Occupation</label>
        <div class="col-sm-4">
            <select class="form-control" id="occupation" name="occupation">
                <option value="">Choose Occupation</option>                     
            </select>
        </div>  
    </div>
    <div class="form-group row">
        <label for="user" class="col-sm-4 col-form-label h3">Choose User</label>
        <div class="col-sm-4">
            <select class="form-control" id="user" name="user">
                <option value="">Choose User</option>                       
            </select>
        </div>  
    </div>   

<?php echo form_close(); ?>

<script type="text/javascript">
$(document).ready(function(){
 $('#department').on('change', function(){
    var dep_id = $('#department').val();
    if(dep_id == ''){
        $('#occupation').prop('disabled', true);
        $('#user').prop('disabled', true);
    } else {
        $('#occupation').prop('disabled', false);
        $.ajax({
            url:"<?php echo base_url(); ?>workstations/get_occupations",
            type:"POST",
            data: {'dep_id' : dep_id},
            dataType: 'json',
            success:function(data){
                $('#occupation').html(data);

            },
            error:function(){
                alert('NOK');
            }
        });
    }
 });
  $('#occupation').on('change', function(){
    var ocp_id = $('#occupation').val();
    if(ocp_id == ''){
        $('#user').prop('disabled', true);
    } else {
        $('#user').prop('disabled', false);
        $.ajax({
            url:"<?php echo base_url(); ?>workstations/get_users",
            typle:"POST",
            data: {ocp_id : ocp_id},
            dataType:'json',
            success:function(data){
                $('#user').html(data)
            },
            error:function(){
                alert("NOK");
            }
        });
    }
  });
});
</script>

答案

在第二个Ajax调用$('#occupation').on('change', function(){})

它应该是这样的

type : "POST",
data: {'ocp_id' : ocp_id},

另一答案

data: {ocp_id : ocp_id},

应该

data: {'ocp_id' : ocp_id},