Filter select option pada modal ubah data

Selamat malam para expert. mohon maaf saya ada kesulitan saat akan mengubah data pada dynamic select option.berikut kira2 kodenya.

modal ubah data:
<div class="modal fade" id="modalubahBumdes" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalubahBumdesLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" method="post">
                    <div class="modal-header bg-warning">
                        <h5 class="modal-title" id="modalubahBumdesLabelHeader">Ubah Data BUM Desa</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="ubahidBumdes" class="form-label fw-bold" hidden>ID Bumdes</label>
                            <input type="number" class="form-control form-control-sm" id="ubahidBumdes" name="ubahidBumdes" aria-describedby="ubahidBumdes" hidden>
                        </div>
                        <div class="mb-3">
                            <label for="ubahnamaBumdes" class="form-label fw-bold">Nama Bumdes</label>
                            <input type="text" class="form-control form-control-sm" id="ubahnamaBumdes" name="ubahnamaBumdes" aria-describedby="ubahnamaBumdes" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahalamatBumdes" class="form-label fw-bold">Alamat Bumdes</label>
                            <textarea class="form-control form-control-sm" name="ubahalamatBumdes" id="ubahalamatBumdes" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="ubahidKecamatan" class="form-label fw-bold">Kecamatan</label>
                            <select id="ubahidKecamatan" name="ubahidKecamatan" class="form-select form-select-sm" aria-label="Default select example">
                                <?php
                                $pilihKecamatan = mysqli_query($koneksi, "SELECT * FROM kecamatan ORDER BY namaKecamatan ASC");
                                while ($row = mysqli_fetch_array($pilihKecamatan)) {
                                ?>
                                    <option value="<?php echo $row['idKecamatan'] ?>"><?php echo $row['namaKecamatan'] ?></option>
                                <?php
                                };
                                ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="ubahidDesa" class="form-label fw-bold">Desa</label>
                            <select id="ubahidDesa" name="ubahidDesa" class="form-select form-select-sm" aria-label="Default select example">
                                <?php
                                $query = mysqli_query($koneksi, "SELECT * FROM desa ORDER BY namaDesa ASC");
                                while ($hasil = mysqli_fetch_array($query)) {
                                ?>
                                    <option value="<?php echo $hasil['idDesa']; ?>"><?php echo $hasil['namaDesa']; ?></option>
                                <?php
                                };
                                ?>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="ubahunitUsaha" class="form-label fw-bold">Unit Usaha</label>
                            <input type="text" class="form-control form-control-sm" id="ubahunitUsaha" name="ubahunitUsaha" aria-describedby="ubahunitUsaha" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahnoPerdes" class="form-label fw-bold">Nomor Perdes</label>
                            <input type="text" class="form-control form-control-sm" id="ubahnoPerdes" name="ubahnoPerdes" aria-describedby="ubahnoPerdes" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahtglPerdes" class="form-label fw-bold">Tanggal Perdes</label>
                            <input type="date" class="form-control form-control-sm" id="ubahtglPerdes" name="ubahtglPerdes" aria-describedby="ubahtglPerdes" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahnoSk" class="form-label fw-bold">Nomor SK BUM Desa</label>
                            <input type="text" class="form-control form-control-sm" id="ubahnoSk" name="ubahnoSk" aria-describedby="ubahnoSk" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahtglSk" class="form-label fw-bold">Tanggal SK BUM Desa</label>
                            <input type="date" class="form-control form-control-sm" id="ubahtglSk" name="ubahtglSk" aria-describedby="ubahtglSk" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahadArt" class="form-label fw-bold">AD/ART</label>
                            <select id="ubahadArt" name="ubahadArt" class="form-select form-select-sm" aria-label="ubahadArt">
                                <option value="" disable selected>-- Pilih AD/ART --</option>
                                <option value="Ada">Ada</option>
                                <option value="Tidak">Tidak</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="ubahstatusBumdes" class="form-label fw-bold">Status BUM Desa</label>
                            <select id="ubahstatusBumdes" name="ubahstatusBumdes" class="form-select form-select-sm" aria-label="ubahstatusBumdes">
                                <option value="Aktif">Aktif</option>
                                <option value="Tidak Aktif">Tidak Aktif</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="ubahnamaKades" class="form-label fw-bold">Nama Kepala Desa</label>
                            <input type="text" class="form-control form-control-sm" id="ubahnamaKades" name="ubahnamaKades" aria-describedby="ubahnamaKades" required>
                        </div>
                        <div class="mb-3">
                            <label for="ubahjumlahPengurus" class="form-label fw-bold">Jumlah Pengurus</label>
                            <input type="number" class="form-control form-control-sm" id="ubahjumlahPengurus" name="ubahjumlahPengurus" aria-describedby="ubahjumlahPengurus" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" type="button" class="btn btn-primary btn-success btn-sm" id="updateBumdes" name="updateBumdes">Simpan</button>
                        <button type="button" class="btn btn-secondary btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

script ambil data saat tombol ubah data di click dan modal ubah muncul:
function getDetailBumdes(ubahid) {
            $('#ubahidBumdes').val(ubahid);
            $.ajax({
                url: 'bumdes/ubah.php',
                type: 'post',
                data: {
                    ubahid: ubahid
                },
                success: function(data, status) {
                    var a = JSON.parse(data);
                    $('#ubahnamaBumdes').val(a.namaBumdes);
                    $('#ubahalamatBumdes').val(a.alamatBumdes);
                    $('#ubahidKecamatan').val(a.idKecamatan);
                    $('#ubahidDesa').val(a.idDesa);
                    $('#ubahunitUsaha').val(a.unitUsaha);
                    $('#ubahnoPerdes').val(a.noPerdes);
                    $('#ubahtglPerdes').val(a.tglPerdes);
                    $('#ubahnoSk').val(a.noSk);
                    $('#ubahtglSk').val(a.tglSk);
                    $('#ubahadArt').val(a.adArt);
                    $('#ubahstatusBumdes').val(a.statusBumdes);
                    $('#ubahnamaKades').val(a.namaKades);
                    $('#ubahjumlahPengurus').val(a.jumlahPengurus);
                },
            });
            $('#modalubahBumdes').modal('show');
        };

bumdes/ubah.php:
<?php 
    include("../koneksi.php");

    if(isset($_POST['ubahid'])){
        $idBumdes = $_POST['ubahid'];
        
        $query=mysqli_query($koneksi, "SELECT * FROM bumdes WHERE idBumdes = '$idBumdes'");
        $response=array();
        while($hasil=mysqli_fetch_assoc($query)){
            $response = $hasil;
        }
        echo json_encode($response);
    }

?>

pada saat modal ubah muncul,data yg muncul di modal ubah sudah sesuai dengan database.hanya saja pada bagian form control #ubahidDesa, saat di klik/mau di ubah,data idDesa muncul semua,tidak terfilter berdasarkan idKecamatan.bagaimana caranya hanya memunculkan idDesa yang idKecamatannya sesuai dengan form control #ubahidKecamatan?
mohon bantuannya.

avatar ruben46

@ruben46

17 Kontribusi 0 Poin


Jawaban

Kalau #ubahidDesa cuman buat ditampilkan aja karena bakal tidak berubah.

Di atas #ubahidDesa tambahin aja input text dengan property readonly dan hidden.

Jadi ketika ajax selesai ngambil value. Yang #ubahidDesa di hidden, lalu munculkan aja input text tadi yang terhidden dengan value yang di set.

Lalu sebelumnya kamu mengatakan "data idDesa muncul semua" ya karena dari awal kan memang muncul semua. Sama sepertiย  #ubahidKecamatan. Yang ajax cuman mengganti option yang diselected
avatar GrennKren

@GrennKren

61 Kontribusi 45 Poin

  • cara memfilternya seperti apa kak?.untuk menambahkan input text saya paham.tapi memfilter nya gmn?jika misal saya ingin mengubah value #ubahidDesa,saya ingin pilihan optionnya desa yg sesuai #ubahidKecamatan.mohon bantuannya kak.terima kasih sebelumnya - @ruben46
  • Apa tabel desa ada kolom yang berelasi dengan idKecamatan? Bila ada syukur lah dan itu bisa digunakan untuk memfilter - @GrennKren
  • ada kak.saya punya tabel desa dengan isi field kurang lebih seperti ini: idDesa | namaDesa | idKecamatan mohon bantu kak bagaimana script atau kode untuk filternya.karena saya kebetulan pake kode seperti di bawah: - @ruben46


di modal tambah,saya menggunakan script untuk filter desa kurang lebih sbb:

$('#idKecamatan').change(function(event) {
            event.preventDefault();
            var idKecamatan = $(this).val();
            $.ajax({
                type: 'post',
                url: 'bumdes/desa.php',
                data: {
                    idKecamatan: idKecamatan
                },
                success: function(data) {
                    $('#idDesa').html(data);
                },
            });
        });

file bumdes/desa.php sbb:

<?php 
    include("../koneksi.php");

    $idKecamatan = $_POST['idKecamatan'];

        $query=mysqli_query($koneksi,"SELECT * FROM desa WHERE idKecamatan='$idKecamatan'");
        echo'<option value="">-- Pilih Desa --</option>';
        while($hasil=mysqli_fetch_array($query)){
         echo'<option value="'.$hasil['idDesa'].'">'.$hasil['namaDesa'].'</option>';  
        }
?>

pada saat menambah data,filter berhasil.namun saat mau ubah data melalui modal ubah,bagaimana memfilter #ubahidDesa agar menampilkan idDesa yang sesuai dengan value #ubahidKecamatan?


avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • Kedua script mu gak ada yang salah sebenarnya, baik yg javascript atau pun yang di php. - @GrennKren
  • Tapi apakah selector nya udah sesuai? Karena di yang di modal, kecamatan nya punya id #ubahidKecamatan .. tapi yg di event listener mu #idKecamatan - @GrennKren
  • yg eventlistener #idKecamatan itu saya pake saat saya mau input data pake modal tambah data.nah yang jadi kendala itu,saat saya mau update data pake modal ubah data.saat modal ubah muncul,data yg di modal ubah sudah sesuai dengan data yg ada di data base.tapi ketika saya mau ubah data idDesa yang ada di #ubahidDesa,idDesanya tidak terfilter sebagaimana modal tambah.kira2 gambarannya seperti ini kak - @ruben46


saya input data di modal tambah data dengan pilihan data kecamatan sukadiri dan desa buaran jati sbb:

image.pngimage.png
saat saya mau ubah data dengan modal ubah data,data muncul sudah sesuai:

image.pngimage.png
tapi ketika saya mau ubah desanya,data desa yang muncul seperti ini:

image.pngimage.png
bagaimana cara memfilter desanya seperti form modal tambah data?
avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • Kalo gitu berarti mainnya di javascript ya. Yang option di dalam #ubahIdDesa tambahin parameter data-id_kecamatan - @GrennKren
  • Isi value nya bedasarkan idKecamatan dari query - @GrennKren
  • Lalu buat eventListener 'change' untuk #ubahIdKecamatan. - @GrennKren

Tampikan semua |


event change #ubahidKecamatan:

$('#ubahidKecamatan').change(function(event) {
            event.preventDefault();
            var idKecamatan = $('#ubahidKecamatan').val();
            $("#ubahIdDesa option:not([idKecamatan=" + idKecamatan + "])").hide()
            $("#ubahIdDesa option:not([idKecamatan=" + idKecamatan + "])").show() 
        });
avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • IdKecamatan= itu diganti - @GrennKren
  • Option di dalam #ubahIdDesa tambahin sebuah parameter data-id_kecamatan - @GrennKren
  • Pokok nya nambahin parameter dlu yg di option - @GrennKren

Tampikan semua |


$('#ubahidKecamatan').change(function(event) {
        event.preventDefault();
        var idKecamatan = $('#ubahidKecamatan').val();
        $("#ubahIdDesa option:not([data-id_kecamatan=" + idKecamatan + "])").hide();
        $("#ubahIdDesa option[data-id_kecamatan=" + idKecamatan + "]").show();
    });
avatar ruben46

@ruben46

17 Kontribusi 0 Poin

  • ya, tinggal yg option di dalam #ubahIdDesa udah ditambahin parameter data-id_kecamatan? - @GrennKren


#ubahidDesa
  <div class="ds mb-3 bg-info">
       <label for="ubahidDesa" class="form-label fw-bold">Desa</label>
       <select id="ubahidDesa" name="ubahidDesa" class="form-select form-select-sm" aria-label="Default select example" data>
            <option value="[data-id_kecamatan=' + idKecamatan + ']"></option>
       </select>
  </div>

avatar ruben46

@ruben46

17 Kontribusi 0 Poin


Login untuk gabung berdiskusi