Select 必需在我使用 ajax ,laravel 8 后无效

Question

我有模态形式

<!-- Modal UBAH -->
    <div class="modal fade" id="modalTambahBarangKeluar" tabindex="-1" aria-labelledby="modalTambahBarangKeluar"
        aria-hidden="true">
        <div class="modal-dialog box text-black">
            <div class="modal-content">
                <div class="garis"></div>
                <div class="modal-header">
                    <h5 class="modal-title ml-auto" id="modalLabel">Tambah Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="/inventaris/tambahbarangkeluar" method="post">
                        @csrf
                        <input type="hidden" id="id_barang" required name="id">
                        <div class="row">
                            <div class="mb-3 col-lg-6">
                                <label for="nama" class="form-label">Nama Barang</label>
                                <input type="text" class="form-control" id="nama" required placeholder="Nama Barang"
                                    name="nama">
                            </div>


                            <div class="mb-3 col-lg-6">
                                <label for="jumlah_barang_keluar" class="form-label">Jumlah Barang Keluar</label>
                                <input type="number" class="form-control" id="jumlah_barang_keluar" required
                                    placeholder="Jumlah Barang Keluar" name="jumlah_barang_keluar">
                            </div>

                            <div class="mb-3 col-lg-6">
                                <label for="id_role" class="form-label">Role Pembawa Barang</label>
                                <select class="form-select" aria-label="select-id_role" required id="id_role" name="id_role">
                                    <option disabled selected>Siswa/Guru/Warga/dll</option>
                                    @foreach ($data_level as $level)
                                    <option value="{{ $level['level'] }}">{{ $level['level'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-6">
                                <label for="id_kelas" class="form-label">Kelas Pembawa Barang</label>
                                <select class="form-select" aria-label="select-id_kelas" required id="id_kelas" name="id_kelas" disabled>
                                    <option disabled selected>XII-RPL 2/XI-RPL 2/dll</option>
                                    @foreach ($dataKelas as $kelas)
                                        <option value="{{ $kelas['id'] }}">{{ $kelas['nama_kelas'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-lg-6">
                                <label for="nama_pembawa" class="form-label">Nama Pembawa Barang</label>
                                <select class="form-select" aria-label="select-nama_pembawa" required id="nama_pembawa" name="nama_pembawa">
                                    <option disabled selected>Nama Lengkap</option>
                                </select>
                            </div>

                            <div class="mb-3 col-lg-6">
                                <label for="id_keterangan_keluar" class="form-label">Keterangan</label>
                                    <select class="form-select" aria-label="select-keterangan" required id="keterangan" name="keterangan">
                                        <option disabled selected>Hilang/Dijual/Rusak</option>
                                        <option value="hilang">Hilang</option>
                                        <option value="dijual">Dijual</option>
                                        <option value="rusak">Rusak</option>
                                        <option value="lainya">Lainya</option>
                                    </select>

                            </div>

                            <div class="mb-3 col-lg-12">
                                <label for="keterangan_tambahan" class="form-label">Keterangan Tambahan</label>
                                <input type="text" class="form-control" id="keterangan_tambahan" placeholder="Keterangan_tambahan"
                                    name="keterangan Tambahan">
                            </div>


                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Simpan Data</button>
                </div>
                </form>
            </div>
        </div>
    </div>

在我添加脚本 jquery 来填充 #nama_pembawa 选项之前，所需的功能是有效的，但现在，如果我只填写 #nama_barang & #jumlah，它会直接提交它不检查是否需要 select 选项

这是我的脚本

//Barang Keluar
    //tambah
    $(".tombolTambahBarangKeluar").on("click", function () {
        $("#modalLabel").html("Tambah Data Barang Keluar");
        $(".modal-footer button[type=submit]").html("Tambah Barang Keluar");
    });

    $("#id_role").on("change", function (e) {
        var role = e.target.value;
        $("#nama_pembawa").empty();
        if (role == "Admin" || role == "Operator" || role == "Guru") {
            $("#id_kelas").prop("disabled", true);
            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                },
                url: "/inventaris/getdataguru",
                method: "post",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (i, data) {
                        $("#nama_pembawa").append(
                            $("<option>", {
                                value: data.id,
                                text: data.nama,
                            })
                        );
                    });
                },
            });
        } else {
            $("#id_kelas").prop("disabled", false);
            $("#id_kelas").on("change", function (e) {
                var id_kelas = e.target.value;
                $("#nama_pembawa").empty(); 
                $.ajax({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                            "content"
                        ),
                    },
                    url: "/inventaris/getdatasiswa",
                    method: "post",
                    data: { id_kelas: id_kelas },
                    dataType: "json",
                    success: function (data) {
                      console.log(data);
                        $.each(data, function (i, data) {
                            $("#nama_pembawa").append(
                                $("<option>", {
                                    value: data.id,
                                    text: data.nama,
                                })
                            );
                        });
                    },
                });
            });
        }
    });
});

是我的脚本错误吗，第一个 select 选项没有值，只有在 jquery 给出新选项后才会有值，

我只是输入了商品名称和数量，根本没有改变select输入，

但是当我提交时，select 输入

没有说明需要

Answer 1

我刚刚向 option disabled 添加了一个空值并选择了这样的：

<option disabled selected value="">XII-RPL 2/XI-RPL 2/dll</option>

现在可以使用了。

Select 必需在我使用 ajax ,laravel 8 后无效

Select Required Not Work after i use ajax ,laravel 8

javascript

php

mysql

select

laravel-8

Select 必需 在我使用 ajax ,laravel 8 后无效

Select Required Not Work after i use ajax ,laravel 8

javascript

php

mysql

select

laravel-8

Select 必需在我使用 ajax ,laravel 8 后无效