Laravel中如何根据下拉菜单选中值动态展示表格内容

实现方案 #

你需求的核心是前端下拉选择值变化后动态更新表格复选框状态，由于Blade的$dropdown_value是服务端渲染变量，页面渲染完成后无法直接通过前端操作修改，可采用以下两种方案实现：

方案1：纯前端本地切换（推荐，适配你当前最多10次会议的场景） #

提前把所有场次的出席数据渲染到页面，切换下拉时直接读取本地数据更新状态，无需发送网络请求。

1. 修改表格行代码，存储全量出席数据到DOM属性：

@foreach($kehadiran as $data)
  <tr class="attendance-row" data-all-attendance="{{ json_encode($data) }}">
     <td>{{ $loop->iteration }}</td>
     <td>{{ $data->peserta->npm_peserta }}</td>
     <td>{{ $data->peserta->nama_peserta }}</td>
     <td style="text-align: center;" class="align-middle">
         <input type="hidden" name="{{ 'k'.$loop->iteration }}" value="">
         <input type="checkbox" class="{{ 'k'.$loop->iteration }} check hadir-check" name="{{ 'k'.$loop->iteration }}" value="Hadir"/>
     </td>
     <td style="text-align: center;" class="align-middle">
         <input type="checkbox" class="{{ 'k'.$loop->iteration }} check absen-check" name="{{ 'k'.$loop->iteration }}" value="Absen"/>
     </td>
   </tr>
@endforeach

2. 页面底部添加JS逻辑，监听下拉变化和复选框单选逻辑：

// 处理同一行复选框单选逻辑
document.querySelectorAll('.check').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const rowClass = this.classList[0];
    if(this.checked) {
      document.querySelectorAll(`.${rowClass}.check`).forEach(el => {
        if(el !== this) el.checked = false;
      });
    }
  })
})

// 监听下拉选择变化，更新复选框状态
document.querySelector('#nomor_pertemuan').addEventListener('change', function() {
  const selectedPertemuan = this.value;
  if(!selectedPertemuan) {
    // 未选择时清空所有选中状态
    document.querySelectorAll('.check').forEach(el => el.checked = false);
    return;
  }
  const fieldName = `pertemuan_${selectedPertemuan}`;
  // 遍历所有行更新状态
  document.querySelectorAll('.attendance-row').forEach(row => {
    const attendanceData = JSON.parse(row.dataset.allAttendance);
    const hadirCheck = row.querySelector('.hadir-check');
    const absenCheck = row.querySelector('.absen-check');
    if(attendanceData[fieldName] === 'Hadir') {
      hadirCheck.checked = true;
      absenCheck.checked = false;
    } else {
      hadirCheck.checked = false;
      absenCheck.checked = true;
    }
  })
})

方案2：Ajax异步请求方案（适合数据量大、场次多的场景） #

1. 新增后端接口，接收场次参数，返回对应场次的出席数据，或直接返回渲染后的表格HTML片段。
2. 下拉变化时发送Ajax请求拉取数据，更新表格内容：

document.querySelector('#nomor_pertemuan').addEventListener('change', function() {
  const selectedPertemuan = this.value;
  fetch(`/your/api/path?pertemuan=${selectedPertemuan}`)
    .then(res => res.text())
    .then(html => {
      document.querySelector('#attendance-table tbody').innerHTML = html;
    })
})

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