प्रोग्रामेटिक रूप से पॉप्युलेट किए गए ड्रॉपडाउन परिवर्तन इवेंट पर 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);

                    }
      })
    });
});