如何使用 ajax jquery 将下拉值传递给 controller

Question

我需要使用 ajax 将下拉列表中的值传递给 controller。 这是我的代码：

<div class="dropdown">
            <input class="btn btn-primary dropdown-toggle" id="btnDropDownCabang" name="btnDropDownCabang"
                    value="Pilih Salah Satu" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false" style="width:250px">
                Pilih Salah Satu
            <ul class="dropdown-menu mh" style="max-height: 250px; overflow-y: auto;" id="dropDownMenu"
                aria-labelledby="dropdownMenuButton1" style="width:250px;">
                @foreach($cabang['data'] as $listCabang)
                    <li><a class="dropdown-item" href="#">{{$listCabang->cab_kodecabang}}
                            - {{$listCabang->cab_namacabang}}</a></li>
                @endforeach
            </ul>
        </div>

$.ajax({
                    type: 'POST',
                    url: 'monitoring_plano/public/laporan/test',
                    data: {
                        'btnDropDownCabang': kodeCabang,
                    },
                    success: function (Response) {
                        alert(Response)
                    }
                })

public function test(Request $request)
    {

        $kodeCabang = $request->request->get('btnDropDownCabang');

        dd($kodeCabang);

    }

当我运行它时，它返回 null。 谁能帮我？ 谢谢

Answer 1

在下拉项目中，您可以创建如下

<a class="dropdown-item" href="#" data-kode="{{ $listCabang->cab_kodecabang }}">

然后像这样在 javascript 中。

$('body').on('click', '.dropdown-item', function() {
    let kodeCabang = $(this).attr('data-kode');

    $.ajax({
        type: 'POST',
        url: 'monitoring_plano/public/laporan/test',
        data: {
            'btnDropDownCabang': kodeCabang,
        },
        success: function (Response) {
            alert(Response)
        }
    })
});