Jquery en un evento de cambio desplegable completado mediante programación no se activa

Hola,

Tengo dos cuadros desplegables, programa y curso, el menú desplegable del programa se completa mediante programación y quiero que cuando obtenga un valor, en otras palabras, cuando su valor cambie, entonces el menú desplegable del curso debe completarse según el valor del programa, pero no funciona hasta que cambie. el valor desplegable del programa seleccionándolo y cambiándolo.

por favor ayuda.

Lo que he probado:

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

                    }
      })
    });
});

Solución 1

Como era de esperar, el change incendios de eventos cuando se cambia el valor seleccionado. Él no es se activa cuando la página se carga por primera vez.

Puede activar manualmente el change evento cuando se carga la página:

javascript

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

.trigger() | Documentación de la API de jQuery[^]

O puede extraer el controlador en su propia función y llamarlo explícitamente cuando se carga la página:

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

Este enfoque le permite adjuntar el mismo controlador a múltiples eventos en múltiples elementos; por ejemplo, en este caso, el change evento en la lista del semestre.