如何实现部门下拉框联动筛选员工下拉框？（无JS/Ajax基础）

嘿，我懂你要的效果——选好部门后，员工下拉框自动只显示对应部门的人，而且你不太熟JS和Ajax对吧？别慌，我给你两个超简单的方案，代码都写得明明白白，你直接复制粘贴就能用：

先调整你的HTML结构（很重要） #

首先得把部门和员工的选择器调整成方便JS操作的样子，我基于你给的代码补全两种常见情况：

情况1：用下拉框选部门 #

<!-- 部门下拉框 -->
<div class="pure-checkbox ml-15">
  <label for="department-select"> Department </label>
  <select id="department-select" class="form-control">
    <option value="">Select Department</option>
    <!-- 替换成你后端循环的部门，比如@foreach($departments as $dept) -->
    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
  </select>
</div>

<!-- 员工下拉框 -->
<div id="show-me-three">
  <select id="employee-select" class="form-control e1">
    <option value="">Select Employee</option>
    <!-- 每个员工选项加个data-department属性，关联所属部门ID -->
    <!-- 替换成你的后端循环：@foreach($employees as $emp) -->
    <option value="{{ $emp->id }}" data-department="{{ $emp->department_id }}">{{ $emp->name }}</option>
  </select>
</div>

情况2：用你原来的radio选部门 #

如果你坚持用radio按钮选部门，那把部门部分改成这样：

<div class="pure-checkbox ml-15">
  <!-- 给所有部门radio加个共同的类department-radio，方便JS监听 -->
  <input id="dept1" name="department" type="radio" data-type="round" class="checkbox look-me department-radio" value="1">
  <label for="dept1"> 技术部 </label>
  
  <input id="dept2" name="department" type="radio" data-type="round" class="checkbox look-me department-radio" value="2">
  <label for="dept2"> 人事部 </label>
</div>

<!-- 员工下拉框和上面一样，保留data-department属性 -->
<div id="show-me-three">
  <select id="employee-select" class="form-control e1">
    <option value="">Select Employee</option>
    @foreach($employees as $emp)
    <option value="{{ $emp->id }}" data-department="{{ $emp->department_id }}">{{ $emp->name }}</option>
    @endforeach
  </select>
</div>

方案1：纯前端筛选（无需后端请求，最适合新手） #

这个方案适合你已经把所有员工数据提前加载到页面的情况，不用发请求，直接前端过滤：

对应下拉框选部门的JS代码 #

// 先拿到两个下拉框的DOM元素
const deptSelect = document.getElementById('department-select');
const empSelect = document.getElementById('employee-select');
// 保存所有员工选项，避免筛选后丢失原始数据
const allEmpOptions = Array.from(empSelect.options);

// 监听部门选择变化的事件
deptSelect.addEventListener('change', function() {
  const selectedDeptId = this.value;
  
  // 先清空员工下拉框，加个默认选项
  empSelect.innerHTML = '<option value="">Select Employee</option>';
  
  // 如果没选部门，就恢复所有员工选项
  if (!selectedDeptId) {
    allEmpOptions.forEach(opt => empSelect.appendChild(opt));
    return;
  }
  
  // 筛选出对应部门的员工
  const filteredOpts = allEmpOptions.filter(opt => {
    // 跳过默认的"Select Employee"选项（它没有data-department属性）
    if (!opt.dataset.department) return false;
    return opt.dataset.department === selectedDeptId;
  });
  
  // 把筛选后的选项添加到员工下拉框
  filteredOpts.forEach(opt => empSelect.appendChild(opt));
});

对应radio选部门的JS代码 #

// 拿到所有部门radio按钮
const deptRadios = document.querySelectorAll('.department-radio');
const empSelect = document.getElementById('employee-select');
const allEmpOptions = Array.from(empSelect.options);

// 给每个radio加监听事件
deptRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 只有选中的radio才触发逻辑
    if (!this.checked) return;
    
    const selectedDeptId = this.value;
    empSelect.innerHTML = '<option value="">Select Employee</option>';
    
    if (!selectedDeptId) {
      allEmpOptions.forEach(opt => empSelect.appendChild(opt));
      return;
    }
    
    // 筛选逻辑和上面一样
    const filteredOpts = allEmpOptions.filter(opt => {
      if (!opt.dataset.department) return false;
      return opt.dataset.department === selectedDeptId;
    });
    
    filteredOpts.forEach(opt => empSelect.appendChild(opt));
  });
});

方案2：从后端加载员工（简化版Ajax，不用复杂框架） #

如果你的员工数据太多，不想提前加载到页面，那用这个方案，选部门后从后端拿对应员工：

const deptSelect = document.getElementById('department-select');
const empSelect = document.getElementById('employee-select');

deptSelect.addEventListener('change', function() {
  const selectedDeptId = this.value;
  // 显示加载状态
  empSelect.innerHTML = '<option value="">Loading...</option>';
  
  // 没选部门就清空
  if (!selectedDeptId) {
    empSelect.innerHTML = '<option value="">Select Employee</option>';
    return;
  }
  
  // 原生Ajax请求，替换成你的后端接口地址，比如/api/employees?dept_id=xxx
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/api/employees?dept_id=${selectedDeptId}`, true);
  
  // 请求成功后的处理
  xhr.onload = function() {
    if (this.status === 200) {
      // 把后端返回的JSON转成数组
      const employees = JSON.parse(this.responseText);
      empSelect.innerHTML = '<option value="">Select Employee</option>';
      // 循环添加员工选项
      employees.forEach(emp => {
        const opt = document.createElement('option');
        opt.value = emp.id;
        opt.textContent = emp.name;
        empSelect.appendChild(opt);
      });
    } else {
      // 请求失败的提示
      empSelect.innerHTML = '<option value="">加载失败，请重试</option>';
    }
  };
  
  // 发送请求
  xhr.send();
});

后端需要做的：接收dept_id参数，返回对应的员工列表，格式是JSON数组，比如：[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]

几个新手友好的小提示 #

• 确保部门的value和员工的data-department值完全一致（比如都是数字ID，大小写要对）。
• 把JS代码放在页面底部（</body>标签之前），或者用DOMContentLoaded事件包裹，避免DOM还没加载完就执行JS。
• 测试的时候，选不同部门看看员工下拉框会不会更新，有问题就检查控制台（F12打开）有没有报错。

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