如何实现：勾选学院/高中复选框后，下拉框动态显示对应选项？

Yep, you'll definitely need JavaScript (or jQuery, if you prefer that syntax) to pull off this dynamic dropdown update. Let's walk through how to make this work step by step.

First, let's tweak your original HTML a bit to give the "College Student" checkbox an ID (it's missing one right now, which makes it hard to target with code):

<div class="form-group right">
  <label class="label-title">Status</label>
  <div>
    <label><input type="checkbox" id="college-student">College Student</label>
    <label><input type="checkbox" class="senior-high" id="senior-high">Senior High</label>
  </div>
</div>
<div class="horizontal-group">
  <div class="form-group left">
    <label for="Course">Course</label>
    <select id="Course"></select>
  </div>
</div>

Option 1: Vanilla JavaScript (No Libraries Needed) #

This approach uses plain JavaScript, so you don't need to load any extra libraries:

// Grab references to our elements
const collegeCheckbox = document.getElementById('college-student');
const seniorHighCheckbox = document.getElementById('senior-high');
const courseSelect = document.getElementById('Course');

// Define our course options grouped by student status
const courseOptions = {
  college: ['BS-IT', 'BS-IT-DA', 'BS-CS'],
  seniorHigh: ['GAS', 'IT', 'CS']
};

// Function to update the dropdown based on checked boxes
function updateCourseDropdown() {
  // Clear all existing options first
  courseSelect.innerHTML = '';
  
  // Collect all courses from checked statuses
  let selectedCourses = [];
  if (collegeCheckbox.checked) {
    selectedCourses = selectedCourses.concat(courseOptions.college);
  }
  if (seniorHighCheckbox.checked) {
    selectedCourses = selectedCourses.concat(courseOptions.seniorHigh);
  }
  
  // Add each course as a new option in the dropdown
  selectedCourses.forEach(course => {
    const option = document.createElement('option');
    option.textContent = course;
    option.value = course; // You can set a different value here if needed
    courseSelect.appendChild(option);
  });
}

// Add event listeners to trigger updates when checkboxes are toggled
collegeCheckbox.addEventListener('change', updateCourseDropdown);
seniorHighCheckbox.addEventListener('change', updateCourseDropdown);

Option 2: jQuery (If You're Already Using It) #

If your project already includes jQuery, this syntax might feel more familiar:

$(document).ready(function() {
  // Define course options
  const courseOptions = {
    college: ['BS-IT', 'BS-IT-DA', 'BS-CS'],
    seniorHigh: ['GAS', 'IT', 'CS']
  };

  // Function to update the dropdown
  function updateCourseDropdown() {
    $('#Course').empty(); // Clear existing options
    
    let selectedCourses = [];
    if ($('#college-student').is(':checked')) {
      selectedCourses = selectedCourses.concat(courseOptions.college);
    }
    if ($('#senior-high').is(':checked')) {
      selectedCourses = selectedCourses.concat(courseOptions.seniorHigh);
    }
    
    // Add new options to the dropdown
    $.each(selectedCourses, function(index, course) {
      $('#Course').append($('<option>', {
        value: course,
        text: course
      }));
    });
  }

  // Bind change events to both checkboxes
  $('#college-student, #senior-high').on('change', updateCourseDropdown);
});

Both solutions work the same way:

• They listen for changes to either checkbox
• They clear the dropdown and rebuild it with courses matching the checked statuses
• If both checkboxes are checked, all 6 courses will appear in the dropdown
• If neither is checked, the dropdown will be empty

If you want to set a default state (e.g., show college courses on page load), just call updateCourseDropdown() once after defining the function, or set one of the checkboxes to checked in the HTML.

内容的提问来源于stack exchange，提问作者Grizzly Bear