通过在codeigniter php中使用ajax，根据第一个下拉结果填充第二个下拉列表

Question

I'm trying to do the 2nd drop down population based on the 1st drop down by using ajax in codeigniter. But my problem is after I choose for 1st drop down value, when I try to choose for 2nd drop down value, it shows empty only.

Image below shows that the result after I choose for 1st option. When I try to select for 2nd option, it can't shows the value:

Here's is the code for view:

    <div class="container">
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
    <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center"><?php echo $content_heading;?></h3>
                    <form action="#" id="form" novalidate>
                        <div class="form-row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                <label for="subjectname">Subject Name</label>
                                <select class="form-control" name="subjectname" id="subjectname">
                                   <option>-- Select Subject Name --</option>
                                   <?php foreach($attendance as $row){
                                     echo "<option value='".$row['subject_id']."'>".$row['subject_name']."</option>";
                                   }
                                   ?>
                                </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="lecturer_name">Lecturer Name</label>
                                    <input name="lecturer_name" placeholder="Lecturer Name" class="form-control" type="text" disabled="">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="subjectsection">Section</label>
                                     <select  class="form-control" name = "subjectsection" id='subjectsection'>
                                       <option>-- Select Subject Section --</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="attendance_date">Date</label>
                                    <input name="attendance_date" placeholder="Date" class="form-control" type="date">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="attendance_start_time">From</label>
                                    <input name="attendance_start_time" placeholder="From" class="form-control" type="time">
                                    <div class="invalid-feedback"></div>
                                </div>
                                <div class="form-group">
                                    <label for="attendance_end_time">To</label>
                                    <input name="attendance_end_time" placeholder="To" class="form-control" type="time">
                                    <div class="invalid-feedback"></div>
                                </div>
                        <button type="button" id="btnSave" class="btn btn-primary btn-block" onclick="save()">Confirm</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

Here is the javascript for the ajax function.

 <script> $(document).ready(function(){ // Subject change $('#subjectname').change(function(){ var subject_name = $(this).val(); // AJAX request $.ajax({ url : '<?php echo site_url('attendance/get_subject_section')?>', method: 'post', data: {subject_name: subject_name}, dataType: 'json', success: function(response){ // Remove options $('#subjectsection').find('option').not(':first').remove(); // Add options $.each(response,function(index,data){ $('#subjectsection').append('<option value="'+data['subject_id']+'">'+data['subject_section']+'</option>'); }); } }); }); }); </script>

Here is the code for controller:

    <?php class attendance extends CI_Controller{
function __construct(){
    parent::__construct();
    $this->load->model('Attendance Data/attendance_model','attendance');
}

function index(){
    //$this->load->view('Manage User Registration/user_login_view');
    $data['meta_title'] = 'Attendance';
    $data['content_heading'] = 'Attendance';
    $data['main_content'] = 'Manage Student Attendance/attendance';
    $data['user_id'] = $this->session->userdata('id');

    if($this->session->userdata('user_type')==='lecturer'){
        $data['user_type'] = 'lecturer';
        $data['meta_user_level_title'] = 'Lecturer';
        $data['id'] = $this->session->id;
        $data['main_content'] = 'Manage Student Attendance/lecturer_attendance_view';
        $this->load->view('template/template', $data);
    }else{
        echo "Access Denied";
    }
}

    public function create_attendance()
{
    $data['meta_title'] = 'Add Subject Attendance';
    $data['content_heading'] = 'Add Subject Attendance';
    $data['main_content'] = 'Manage Student Attendance/attendance';
    $data['user_id'] = $this->session->userdata('id');
    $data['user_type'] = 'lecturer';
    $data['heading'] = 'Lecturer';

    if($this->session->userdata('user_type')==='lecturer'){
        $data['user_type'] = 'lecturer';
        $data['attendance'] = $this->attendance->get_subject_name();
        $data['meta_user_level_title'] = 'Lecturer';
        $data['id'] = $this->session->id;
        $data['main_content'] = 'Manage Student Attendance/create_attendance';
        $this->load->view('template/template', $data);
    }else{
        echo "Access Denied";
    }
}

    public function get_subject_section()
{ 
    // POST data 
    $subject_name = $this->input->post('subject_name');
    
    // get data 
    $data = $this->attendance->get_subject_section($subject_name);
    echo json_encode($data); 
}}

Here is my code for model:

<?php class attendance_model extends CI_Model{

    //Get subject name
    public function get_subject_name()
{
    $user_id = $this->session->userdata("id");
    $response = array();
 
    // Select record
    $this->db->select('*');
    $this->db->where('lecturer_id', $user_id);
    $this->db->group_by('subject_id');
    $query = $this->db->get('lecturer_timetable');
    $response = $query->result_array();

    return $response;
}

    //Get subject section
    public function get_subject_section($subject_name){
        $user_id = $this->session->userdata("id");
        $response = array();
     
        // Select record
        $this->db->select('subject_id, subject_section');
        $this->db->where('lecturer_id', $user_id);
        $this->db->where('subject_name', $subject_name);
        $query = $this->db->get('lecturer_timetable');
        $response = $query->result_array();

        return $response;
    }}

Can someone help me to solve this problem? Thanks.

Answer 1

your url in ajax is unreadable because of quotation. Try to writer in proper quotation. Use either single quotes inside double quotes or use double inside single. Second is, you are using method as 'POST' but in lowercase. Write POST in uppercase.

$.ajax({    
    url : "<?php echo site_url('attendance/get_subject_section')?>",
    method: 'POST',
    data: {subject_name: subject_name},
    dataType: 'json',
    success: function(response){        
        console.log(response); // first check by console that you are getting records in response. once you get response then append it or do whatever you want
    
    }

});