求助：如何实现三级下拉框联动——二级随一级、三级随二级切换

Got it, let's get those dropdowns working dynamically. Here's a complete, straightforward implementation that links your school level selection to subsequent dropdowns (like departments and courses):

Step 1: Complete HTML Structure #

First, let's add the missing second and third dropdowns to your existing code:

<select name="selectLevel" id="selectLevel">
  <option value="">-- select a level --</option>
  <option value="jhs">Junior High School</option>
  <option value="shs">Senior High School</option>
  <option value="tertiary">Tertiary</option>
</select>

<select name="selectDepartment" id="selectDepartment" disabled>
  <option value="">-- select a department --</option>
</select>

<select name="selectCourse" id="selectCourse" disabled>
  <option value="">-- select a course --</option>
</select>

I added disabled to the second and third dropdowns by default so they can't be interacted with until a parent selection is made—this keeps the user flow intuitive.

Step 2: Define Hierarchical Data #

We'll use a JavaScript object to map each level to its departments, and each department to its courses. You can tweak this data to match your actual options:

const dropdownData = {
  jhs: {
    departments: ["Math", "Science", "English"],
    courses: {
      Math: ["Algebra", "Geometry"],
      Science: ["Biology", "Chemistry"],
      English: ["Literature", "Grammar"]
    }
  },
  shs: {
    departments: ["STEM", "HUMSS", "ABM"],
    courses: {
      STEM: ["Physics", "Calculus"],
      HUMSS: ["Philosophy", "Creative Writing"],
      ABM: ["Accounting", "Business Management"]
    }
  },
  tertiary: {
    departments: ["Engineering", "Medicine", "Arts"],
    courses: {
      Engineering: ["Mechanical", "Electrical"],
      Medicine: ["Nursing", "Medicine"],
      Arts: ["Fine Arts", "Journalism"]
    }
  }
};

Step 3: Add JavaScript Logic #

Now, let's write functions to update the dropdowns when a selection is made, and attach event listeners to trigger them:

// Get references to the dropdown elements
const levelSelect = document.getElementById('selectLevel');
const deptSelect = document.getElementById('selectDepartment');
const courseSelect = document.getElementById('selectCourse');

// Populate department dropdown based on selected level
function populateDepartments() {
  const selectedLevel = levelSelect.value;
  // Reset department and course dropdowns
  deptSelect.innerHTML = '<option value="">-- select a department --</option>';
  courseSelect.innerHTML = '<option value="">-- select a course --</option>';
  courseSelect.disabled = true;

  if (selectedLevel) {
    deptSelect.disabled = false;
    // Add departments for the selected level
    dropdownData[selectedLevel].departments.forEach(dept => {
      const option = document.createElement('option');
      option.value = dept.toLowerCase().replace(' ', '-'); // Clean value for easy reference
      option.textContent = dept;
      deptSelect.appendChild(option);
    });
  } else {
    deptSelect.disabled = true;
  }
}

// Populate course dropdown based on selected department
function populateCourses() {
  const selectedLevel = levelSelect.value;
  const selectedDept = deptSelect.options[deptSelect.selectedIndex].textContent;
  courseSelect.innerHTML = '<option value="">-- select a course --</option>';

  if (selectedDept && selectedLevel) {
    courseSelect.disabled = false;
    // Add courses for the selected department
    dropdownData[selectedLevel].courses[selectedDept].forEach(course => {
      const option = document.createElement('option');
      option.value = course.toLowerCase().replace(' ', '-');
      option.textContent = course;
      courseSelect.appendChild(option);
    });
  } else {
    courseSelect.disabled = true;
  }
}

// Attach event listeners to trigger updates
levelSelect.addEventListener('change', populateDepartments);
deptSelect.addEventListener('change', populateCourses);

How It Works #

• When you pick a level from the first dropdown, the populateDepartments function runs: it clears the department dropdown, enables it, and adds the relevant departments for that level. It also resets and disables the course dropdown to avoid stale options.
• When you select a department, populateCourses kicks in: it clears the course dropdown, enables it, and loads the courses linked to that department and level.
• If you go back and change the level, all subsequent dropdowns reset to their default state automatically.

You can easily modify the dropdownData object to match your actual list of departments and courses—just follow the same hierarchy pattern.

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