jquery - 如何根据 laravel 中选定的下拉菜单显示表格内容

Question

这是视图，表格上方的下拉菜单

这是下拉列表，我想取选定的值来给它表格数据

<select class="form-control form-select" name="nomor_pertemuan" id="nomor_pertemuan">
    <option value="">-</option>
    @for($i=1; $i<11; $i++)
       <option value={{ $i }}>{{ $i }}</option>
     @endfor
</select>

这是表格内容，每行有两个复选框，只能选择一个，我想检查每个输入，是否检查需要下拉值，我尝试了 ajax 但它似乎不起作用，因为我不太了解。

@foreach($kehadiran as $data)
  <tr>
     <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" name="{{ 'k'.$loop->iteration }}" id="hadir" value="Hadir" {{ $data->{'pertemuan_'.$dropdown_value} == "Hadir" ? "Checked" : '' }}/>
     </td>
     <td style="text-align: center;" class="align-middle">
         <input type="checkbox" class="{{ 'k'.$loop->iteration }} check" name="{{ 'k'.$loop->iteration }}" id="absen" value="Absen"/>
     </td>
   </tr>                                                                           @endforeach

这是表格，如果您看到列名，这就是我需要下拉值的原因

{{ $data->{'pertemuan_'.$dropdown_value} == "Hadir" ? "Checked" : '' }}

那么我可以做些什么来从选定的下拉值动态显示表格数据，我需要将其提供给表格数据的值，如您所见 $dropdown_value 我希望您能理解我的解释

标签： jqueryajaxlaravellaravel-8

Answer 1

经过讨论，OP不知道如何使用循环实现具有拥有数据库结构的复选框，并使用AJAX请求。

所以，我试着回答。

我没有太多时间来解释 AJAX，但我确实在逻辑上解释了，所以 OP 可以使用 AJAX 来实现。

这是pertemuan下拉列表：

<select class="form-control form-select" name="nomor_pertemuan" id="nomor_pertemuan">
    <option value="">-</option>
        @foreach(range(1, 10) as $pertemuan)
       <option value={{ $pertemuan }}>Pertemuan {{ $pertemuan }}</option>
        @endforeach
</select>

您可以将其用作查询字符串。您需要使用 jQuery 事件，或者您可以使用 AJAX 代替：

<script>
$(function(){
    $('#nomor_pertemuan').on('change', function () {
        var url = "{{ url()->current() }}?pertemuan=" + $(this).val();

        if (url) {
            window.location = url;
        }

        return false;
    });
});
</script>

选择下拉列表时，它将重定向到相同的 URL，但有一个查询字符串（根据您的选择）。您可以通过检索会议 ID (ID pertemuan) 进行查询。

然后，您可以pertemuan从查询字符串中选择列：

@foreach($kehadiran as $data)
<table>
<tr>
    ...
    <td style="text-align: center;" class="align-middle">
         <input type="hidden" name="{{ 'k' . request()->input('pertemuan') }}" value="">
         <input type="checkbox" class="check" name="{{ 'k' . request()->input('pertemuan') }}" value="Hadir" {{ $data->{'pertemuan_'.request()->input('pertemuan')} == "Hadir" ? "Checked" : '' }}/>
    </td>
    ...
</tr>
</table>
@endforeach