【解決方法】プログラムで設定されたドロップダウン変更イベントの Jquery がトリガーされない

こんにちは、

プログラムとコースの2つのドロップダウンボックスがあります。プログラムのドロップダウンはプログラムによって入力され、値を取得したとき、つまり値が変更されたときにコースのドロップダウンにプログラムの値に基づいて入力する必要がありますが、変更するまで機能しません。プログラムのドロップダウン値を選択して変更します。

助けてください。

私が試したこと:

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

                    }
      })
    });
});

解決策 1

当然のことながら、 change イベント火災 選択した値が変更されたとき。それ ではない ページが最初に読み込まれるときに発生します。

手動でトリガーすることもできます。 change ページが読み込まれるときのイベント:

JavaScript

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

.trigger() | jQuery API ドキュメント[^]

または、ハンドラーを独自の関数に抽出し、ページの読み込み時に明示的に呼び出すこともできます。

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

このアプローチにより、複数の要素にわたる複数のイベントに同じハンドラーをアタッチできます。たとえば、この場合、 change 学期リストにあるイベント。