[ad_1]
你好,
我有两个下拉框程序和课程,程序下拉列表是以编程方式填充的,我希望当它获得一个值时,换句话说,当它的值发生更改时,课程下拉列表需要根据程序值进行填充,但在我更改之前它不起作用通过选择和更改程序下拉值。
请帮忙。
我尝试过的:
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");
或者您可以将处理程序提取到其自己的函数中,并在页面加载时显式调用它:
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
学期清单上的活动。
[ad_2]
コメント