我計劃做的是為我的學生評分班創建一個評分部分,在能夠選擇活動之前,必須首先選擇某個主題。換句話說,每個主題都有自己的活動,這就是為什么在能夠從主題中選擇活動之前,必須首先選擇一個主題。
我所做的是添加一個條件語句,其中我的查詢必須選擇course_id = $courseTitle的活動。$courseTitle = $_POST
HTML代碼 (活動選擇字段最初是禁用的,當選擇一個主題時變為啟用)
<form>
<div class="mb-3">
<label for="subject" class="form-label">Subject</label>
<select id="subject" class="form-select">
<option selected disabled>-- Select Subject --</option>
<option value="subject1">Subject 1</option>
<option value="subject2">Subject 2</option>
<option value="subject3">Subject 3</option>
</select>
</div>
<div class="mb-3">
<label for="activity" class="form-label">Activity</label>
<select id="activity" class="form-select" disabled>
<option selected disabled>-- Select Activity --</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JavaScript代碼 (您可以通過修改JavaScript部分中的值和文本來自定義主題和活動選項。您可以使用新的PHP代碼從數據庫中獲取這些細節。提交表單時,您可以在服務器端代碼中檢索所選的主題和活動值,以便進一步處理或評分。)
<script>
const subjectSelect = document.getElementById('subject');
const activitySelect = document.getElementById('activity');
subjectSelect.addEventListener('change', function() {
const selectedSubject = this.value;
if (selectedSubject) {
activitySelect.disabled = false;
// Remove existing options
while (activitySelect.firstChild) {
activitySelect.firstChild.remove();
}
// Create new options based on the selected subject
if (selectedSubject === 'subject1') {
addOption(activitySelect, 'activity1', 'Activity 1');
addOption(activitySelect, 'activity2', 'Activity 2');
addOption(activitySelect, 'activity3', 'Activity 3');
} else if (selectedSubject === 'subject2') {
addOption(activitySelect, 'activity4', 'Activity 4');
addOption(activitySelect, 'activity5', 'Activity 5');
} else if (selectedSubject === 'subject3') {
addOption(activitySelect, 'activity6', 'Activity 6');
addOption(activitySelect, 'activity7', 'Activity 7');
addOption(activitySelect, 'activity8', 'Activity 8');
}
} else {
activitySelect.disabled = true;
// Remove existing options
while (activitySelect.firstChild) {
activitySelect.firstChild.remove();
}
// Add default disabled option
addOption(activitySelect, '', '-- Select Activity --', true);
}
});
function addOption(select, value, text, disabled = false) {
const option = document.createElement('option');
option.value = value;
option.text = text;
option.disabled = disabled;
select.appendChild(option);
}
</script>
建議 最后,通過查看您的代碼,我可以看出這會導致很多問題,因為您沒有使用準備好的語句或參數化查詢來使您的代碼更加安全并免受SQL注入的影響。