如何用Angular实现医院预约表单的级联下拉列表

核心需求 #

• 第一个下拉列表提供科室选择功能
• 选中科室后，第二个下拉列表动态加载该科室对应的医生数据
• 科室选择时触发changeDept()方法，通过API获取医生数据作为下拉列表数据源

关键代码实现示例 #

HTML结构 #

<!-- 科室选择下拉框 -->
<select id="departmentSelect" onchange="changeDept()">
  <option value="">请选择科室</option>
  <!-- 初始化渲染科室选项 -->
  <option value="1">心内科</option>
  <option value="2">神经内科</option>
  <option value="3">骨科</option>
</select>

<!-- 医生选择下拉框 -->
<select id="doctorSelect">
  <option value="">请先选择科室</option>
</select>

TypeScript逻辑 #

// 模拟API接口请求，实际替换为真实接口地址
async function getDoctorsByDept(deptId: string) {
  const res = await fetch(`/api/doctors?deptId=${deptId}`);
  return res.json();
}

// 科室切换触发方法
async function changeDept() {
  const deptSelect = document.getElementById('departmentSelect') as HTMLSelectElement;
  const doctorSelect = document.getElementById('doctorSelect') as HTMLSelectElement;
  const selectedDeptId = deptSelect.value;

  // 重置医生下拉框状态
  doctorSelect.innerHTML = '<option value="">加载中...</option>';

  if (!selectedDeptId) {
    doctorSelect.innerHTML = '<option value="">请先选择科室</option>';
    return;
  }

  try {
    // 获取对应科室的医生数据
    const doctors = await getDoctorsByDept(selectedDeptId);
    // 渲染医生下拉选项
    doctorSelect.innerHTML = `
      <option value="">请选择医生</option>
      ${doctors.map(doc => `<option value="${doc.id}">${doc.name}</option>`).join('')}
    `;
  } catch (err) {
    doctorSelect.innerHTML = '<option value="">加载失败，请重试</option>';
    console.error('获取医生数据出错:', err);
  }
}

注意事项 #

• 确保API返回数据包含医生id和name等必要字段，与前端渲染逻辑匹配
• 增加错误处理，避免API请求失败导致页面交互异常
• 若使用React、Vue等框架，可替换原生DOM操作为框架状态管理逻辑，实现更高效的组件联动

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