Jquery trên một sự kiện thay đổi thả xuống được lập trình theo chương trình không được kích hoạt

Xin chào,

Tôi có hai hộp thả xuống chương trình và khóa học, danh sách thả xuống chương trình được điền theo chương trình và tôi muốn khi nó nhận được một giá trị, nói cách khác là khi giá trị của nó thay đổi thì danh sách thả xuống khóa học cần được điền dựa trên giá trị chương trình nhưng nó không hoạt động cho đến khi tôi thay đổi giá trị thả xuống của chương trình bằng cách chọn và thay đổi nó.

Hãy giúp tôi.

Những gì tôi đã thử:

PHP

<div class="form-group">
                    <label for="program">Program</label>
                    <select class="form-control" name="programid" id="programid" required>
                      <option value="">Select Program</option>
                      <?php foreach($programs as $obj) { ?>
                        <option value="<?=$obj['programid'] ?>" <?php if($row['programid'] == $obj['programid']) { ?> selected <?php } ?> ><?=$obj['program'] ?></option>
                        <?php } ?>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="course">Course</label>
                    <select class="form-control" name="courseid" id="courseid" required>
                    </select>
                  </div>

JavaScript

$(function () {
$('#programid').change(function() {
      var semesterid = $('#semesterid').val();
      var programid = $(this).val();
      var courseid = null;
      <?php if($row['courseid'] != null && !empty($row['courseid'])) { ?> courseid = <?php echo $row['courseid']; }  ?>       
      $.ajax({
        url : "<?=site_url('get_courses');?>",
                    method : "POST",
                    data : {programid: programid, semesterid : semesterid},
                    async : true,
                    dataType : 'json',
                    success: function(data){                       
                        var html = '<option value="">Select Course</option>';
                        var i;
                        for(i=0; i<data.length; i++){
                            if(data[i].courseid == courseid)
                            {
                                html += '<option value='+data[i].courseid+' selected>'+data[i].course+'</option>';
                            }
                            else
                            {
                            html += '<option value='+data[i].courseid+'>'+data[i].course+'</option>';
                            }
                        }
                        $('#courseid').html(html);

                    }
      })
    });
});

Giải pháp 1

Không có gì đáng ngạc nhiên, change sự kiện cháy khi giá trị được chọn thay đổi. Nó không làm kích hoạt khi trang được tải lần đầu tiên.

Bạn có thể kích hoạt thủ công change sự kiện khi tải trang:

JavaScript

$('#programid').change(function() {
    ...
}).trigger("change");

.trigger() | Tài liệu API jQuery[^]

Hoặc bạn có thể trích xuất trình xử lý thành hàm riêng của nó và gọi nó một cách rõ ràng khi tải trang:

JavaScript

$(function(){
    let selectedCourseId = null;
    <?php if($row['courseid'] != null && !empty($row['courseid'])) { ?> selectedCourseId = <?php echo $row['courseid']; }  ?>
    
    const updateCourses = function(){
        const semesterid = $('#semesterid').val();
        const programid = $(this).val();
        const courseId = selectedCourseId;
        $.ajax({
            ...
        });
    };
    
    $('#semesterid').change(updateCourses);
    $('#programid').change(updateCourses);
    updateCourses();
});

Cách tiếp cận này cho phép bạn đính kèm cùng một trình xử lý vào nhiều sự kiện trên nhiều phần tử – ví dụ: trong trường hợp này, change sự kiện trong danh sách học kỳ.