Jquery sur un événement de changement de liste déroulante rempli par programme n’est pas déclenché

Bonjour,

J’ai deux listes déroulantes programme et cours, la liste déroulante du programme est remplie par programme et je veux qu’elle obtienne une valeur, en d’autres termes, lorsque sa valeur est modifiée, la liste déroulante du cours doit être remplie en fonction de la valeur du programme, mais elle ne fonctionne pas jusqu’à ce que je change. la valeur déroulante du programme en la sélectionnant et en la modifiant.

s’il vous plaît, aidez-moi.

Ce que j’ai essayé :

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

                    }
      })
    });
});

Solution 1

Sans surprise, le change incendies d’événements lorsque la valeur sélectionnée est modifiée. Il ne fait pas se déclenche lorsque la page se charge pour la première fois.

Vous pouvez soit déclencher manuellement le change événement lors du chargement de la page :

Javascript

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

.trigger() | Documentation de l’API jQuery[^]

Ou vous pouvez extraire le gestionnaire dans sa propre fonction et l’appeler explicitement lors du chargement de la page :

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

Cette approche vous permet d’attacher le même gestionnaire à plusieurs événements sur plusieurs éléments – par exemple, dans ce cas, le change événement sur la liste semestrielle.