Jquery pada peristiwa perubahan dropdown yang diisi secara terprogram tidak dipicu

Halo,

Saya memiliki dua kotak dropdown program dan kursus, dropdown program diisi secara terprogram dan saya ingin ketika mendapat nilai dengan kata lain ketika nilainya diubah maka dropdown kursus perlu diisi berdasarkan nilai program tetapi tidak berfungsi sampai saya mengubahnya nilai dropdown program dengan memilih dan mengubahnya.

tolong bantu.

Apa yang saya coba:

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);

                    }
      })
    });
});

Solusi 1

Tidak mengherankan, itu change kebakaran acara ketika nilai yang dipilih diubah. Dia tidak aktif saat halaman pertama kali dimuat.

Anda dapat memicunya secara manual change acara ketika halaman dimuat:

JavaScript

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

.trigger() | Dokumentasi API jQuery[^]

Atau Anda dapat mengekstrak handler ke dalam fungsinya sendiri, dan memanggilnya secara eksplisit saat halaman dimuat:

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();
});

Pendekatan ini memungkinkan Anda untuk melampirkan pengendali yang sama ke beberapa peristiwa di beberapa elemen – misalnya, dalam kasus ini, change acara dalam daftar semester.