Codeigniter动态依赖下拉Ajax

Question

I have a case of a combobox / dropdown chain where it fits when editing data, the data that has been filled in the PIC dropdown is not changed should the data that is in the dropdown deparment be changed should the automatic dropdown on the PIC be changed but this is not, if created data it's normal to be normal because in the dropdown it hasn't filled in yet, how do I fix it?

Controller here

public function viewCreated()
{
    $departm = $this->db->get('office')->result();
    $where = array('username' => $this->session->userdata('name'));
    $data = array(
        'id_monitoring' => $this->m_data->uniqueID(),
        'dept' => $this->m_data->data_dept()->result(),
        'pic' => $this->m_data->getNamefromDept()->result(),
        'name' => $this->m_data->cek_name($where)->result(),
        'departm' => $departm,
    );
    $this->load->view('manage/v_create', $data);
}    

public function dataPicE($id)
{
    $result = $this->db->where('department', $id)->get('admin')->result();
    echo json_encode($result);
}

View here

<div class="form-group">
    <label>Department</label>
    <select class="form-control select2" style="width: 100%;" name="department" placeholder="Select Group" id="Depart" required>
    <option value=""></option>
    <?php foreach ($departm as $u => $value) { ?>
         <option value="<?php echo $value->id; ?>"><?php echo $value->department; ?></option>
    <?php } ?>
    </select>
</div>

<div class="form-group">
    <label>PIC</label>
    <select class="form-control select2" style="width: 100%;" name="pic" placeholder="Select Group" id="PIC" required>
    </select>
</div>

Route here

$route['manage/v_edit'] = 'Admin';
$route['manage/v_edit/ajax/(:any)'] = 'dataPicE';

JS here

<script type="text/javascript">
    $(document).ready(function(){
        $('select[name="department"]').on('change', function(){
            var departID = $(this).val();
            if(departID){
                $.ajax({
                    url: 'dataPicE/'+departID,
                    type: 'GET',
                    dataType: 'json',
                    success:function(data){
                        //$('select[name="pic"]').empty();
                        $('select[name="pic"]').show();
                        $.each(data, function(key, value){
                            $('select[name="pic"]').append('<option value="'+value.name+'">'+value.name+'</option>')
                        });
                    }
                });
            } else {
                $('select[name="pic"]').empty();
            }
        });
    });
</script>

I hope that someone can help me in learning