لا يتم تشغيل Jquery في حدث تغيير القائمة المنسدلة المعبأ برمجيًا

مرحبًا،

لدي مربعين منسدلين للبرنامج والدورة التدريبية، يتم ملء القائمة المنسدلة للبرنامج برمجيًا وأريد عندما تحصل على قيمة بمعنى آخر عندما تتغير قيمتها، يجب ملء القائمة المنسدلة للدورة بناءً على قيمة البرنامج ولكنها لا تعمل حتى أقوم بالتغيير قيمة القائمة المنسدلة للبرنامج عن طريق تحديدها وتغييرها.

الرجاء المساعدة.

ما حاولت:

بي أتش بي

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

جافا سكريبت

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

                    }
      })
    });
});

الحل 1

ومن غير المستغرب أن change حرائق الأحداث عند تغيير القيمة المحددة. هو – هي لا النار عند تحميل الصفحة لأول مرة.

يمكنك إما تشغيل الملف يدويًا change الحدث عند تحميل الصفحة:

جافا سكريبت

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

.trigger() | وثائق واجهة برمجة تطبيقات jQuery[^]

أو يمكنك استخراج المعالج إلى وظيفته الخاصة، واستدعائه بشكل صريح عند تحميل الصفحة:

جافا سكريبت

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

يسمح لك هذا الأسلوب بإرفاق نفس المعالج بأحداث متعددة عبر عناصر متعددة – على سبيل المثال، في هذه الحالة، change حدث في قائمة الفصل الدراسي.