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

Question

我正在尝试通过在 codeigniter 中使用 ajax 根据第一个下拉列表进行第二个下拉列表填充。但我的问题是在我选择第一个下拉值后，当我尝试选择第二个下拉值时，它只显示为空。

（更新：我已经解决了我的问题。所以，我已经更新了我的代码。）

下图是我选择第一个选项后的结果。当我尝试 select 作为第二个选项时，它无法显示值：

查看代码如下：

    <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="subject_name">Subject Name</label>
                                <select class="form-control" name="subject_name" id="subject_name">
                                   <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="subject_section">Section</label>
                                     <select  class="form-control" name = "subject_section" id='subject_section'>
                                       <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>

这里是 ajax 函数的 javascript。（我已经更新了我的 javascript 代码。）

<script>
  $(document).ready(function(){
 
    // Subject change
    $('#subject_name').change(function(){
      var subject_id = $(this).val();

      // AJAX request
      $.ajax({
        url : "<?php echo site_url('attendance/get_subject_section')?>",
        method: 'POST',
        data: {subject_id: subject_id},
        dataType: 'JSON',
        success: function(response){

          // Remove options 
          $('#subjectsection').find('option').not(':first').remove();

          // Add options
          $.each(response,function(index,data){
             $('#subject_section').append('<option value="'+data['subject_id']+'">'+data['subject_section']+'</option>');
          });
        }
     });
   }); 
 });
</script>

控制器代码如下：

    <?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_id= $this->input->post('subject_id');
    
    // get data 
    $data = $this->attendance->get_subject_section($subject_id);
    echo json_encode($data); 
}}

这是我的模型代码：

<?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_id){
        $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_id', $subject_id);
        $query = $this->db->get('lecturer_timetable');
        $response = $query->result_array();

        return $response;
    }}

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您在 ajax 中的 url 由于引用而无法阅读。试着用适当的引语来写。在双引号内使用单引号或在单引号内使用双引号。其次，您使用的方法是 'POST' 但小写。用大写写POST。

$.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
    
    }

});

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

populate 2nd drop down based on 1st drop down result by using ajax in codeigniter php

javascript

php

jquery

ajax

codeigniter