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

20 Kontribusi 0 Poin

Diperbarui 1 tahun yang lalu

6 Jawaban:

<div>Kalau #ubahidDesa cuman buat ditampilkan aja karena bakal tidak berubah.<br><br>Di atas #ubahidDesa tambahin aja input text dengan property readonly dan hidden.<br><br>Jadi ketika ajax selesai ngambil value. Yang #ubahidDesa di hidden, lalu munculkan aja input text tadi yang terhidden dengan value yang di set.<br><br>Lalu sebelumnya kamu mengatakan "data idDesa muncul semua" ya karena dari awal kan memang muncul semua. Sama seperti&nbsp; #ubahidKecamatan. Yang ajax cuman mengganti option yang diselected</div>

avatar GrennKren
@GrennKren

62 Kontribusi 47 Poin

Dipost 1 tahun yang lalu

Tanggapan

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

Apa tabel desa ada kolom yang berelasi dengan idKecamatan? Bila ada syukur lah dan itu bisa digunakan untuk memfilter

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:

<div>di modal tambah,saya menggunakan script untuk filter desa kurang lebih sbb:<br><br></div><pre>$('#idKecamatan').change(<em>function</em>(<em>event</em>) { event.preventDefault(); <em>var</em> idKecamatan = $(this).val(); $.ajax({ type: 'post', url: 'bumdes/desa.php', data: { idKecamatan: idKecamatan }, success: <em>function</em>(<em>data</em>) { $('#idDesa').html(data); }, }); });</pre><div><br>file bumdes/desa.php sbb:<br><br></div><pre>&lt;?php include("../koneksi.php");

$idKecamatan = $_POST[&#039;idKecamatan&#039;];

    $query=mysqli_query($koneksi,&quot;SELECT * FROM desa WHERE idKecamatan=&#039;$idKecamatan&#039;&quot;);
    echo&#039;&amp;lt;option value=&quot;&quot;&amp;gt;-- Pilih Desa --&amp;lt;/option&amp;gt;&#039;;
    while($hasil=mysqli_fetch_array($query)){
     echo&#039;&amp;lt;option value=&quot;&#039;.$hasil[&#039;idDesa&#039;].&#039;&quot;&amp;gt;&#039;.$hasil[&#039;namaDesa&#039;].&#039;&amp;lt;/option&amp;gt;&#039;;  
    }

?&gt;</pre><div><br>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?<br><br><br></div>

avatar ruben46
@ruben46

20 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Tanggapan

Kedua script mu gak ada yang salah sebenarnya, baik yg javascript atau pun yang di php.

Tapi apakah selector nya udah sesuai? Karena di yang di modal, kecamatan nya punya id #ubahidKecamatan .. tapi yg di event listener mu #idKecamatan

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

<div>saya input data di modal tambah data dengan pilihan data kecamatan sukadiri dan desa buaran jati sbb: <br><br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;image.png&quot;,&quot;filesize&quot;:24009,&quot;height&quot;:377,&quot;url&quot;:&quot;https://i.ibb.co/10dLrRj/image.png&quot;,&quot;width&quot;:593}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/10dLrRj/image.png" width="593" height="377"><figcaption class="attachment__caption"><span class="attachment__name">image.png</span></figcaption></figure><br>saat saya mau ubah data dengan modal ubah data,data muncul sudah sesuai:<br><br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;image.png&quot;,&quot;filesize&quot;:15876,&quot;height&quot;:523,&quot;url&quot;:&quot;https://i.ibb.co/25FLCDR/image.png&quot;,&quot;width&quot;:619}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/25FLCDR/image.png" width="619" height="523"><figcaption class="attachment__caption"><span class="attachment__name">image.png</span></figcaption></figure><br>tapi ketika saya mau ubah desanya,data desa yang muncul seperti ini:<br><br><figure data-trix-attachment="{&quot;contentType&quot;:&quot;image/png&quot;,&quot;filename&quot;:&quot;image.png&quot;,&quot;filesize&quot;:34154,&quot;height&quot;:500,&quot;url&quot;:&quot;https://i.ibb.co/vYCyHZf/image.png&quot;,&quot;width&quot;:579}" data-trix-content-type="image/png" data-trix-attributes="{&quot;presentation&quot;:&quot;gallery&quot;}" class="attachment attachment--preview attachment--png"><img src="https://i.ibb.co/vYCyHZf/image.png" width="579" height="500"><figcaption class="attachment__caption"><span class="attachment__name">image.png</span></figcaption></figure><br>bagaimana cara memfilter desanya seperti form modal tambah data?</div>

avatar ruben46
@ruben46

20 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Tanggapan

Kalo gitu berarti mainnya di javascript ya. Yang option di dalam #ubahIdDesa tambahin parameter data-id_kecamatan

Isi value nya bedasarkan idKecamatan dari query

Lalu buat eventListener 'change' untuk #ubahIdKecamatan.

Jadi ketika #ubahIdKecamatan berubah value nya, maka option selain idKecamatan di buat hidden sedangkan yang dicari dimunculkan.

$("#ubahIdDesa option:not([data-id_kecamatan=" + id_kecamatannya + "])").hide()

Itu untuk menyembunyikan option yang bukan id Kecamatannya

Lalu untuk memunculkan yg sesuai id kecamatannya ya tentu saja

$("#ubahIdDesa option[data-id_kecamatan=" + id_kecamatannya + "]").show()

Lalu bagaimana caranya mentrigger event nya jika tidak mengubah value #ubahIdKecamatan saat modalnya muncul?

$(#ubahIdKecamatan").trigger("change");
Cukup gunakan itu

mohon maaf kak,saya masih agak bingung.apakah seperti di bawah ini?mohon maaf jika tidak sesuai.

<div>event change #ubahidKecamatan:<br><br></div><pre>$('#ubahidKecamatan').change(<em>function</em>(<em>event</em>) { event.preventDefault(); <em>var</em> idKecamatan = $('#ubahidKecamatan').val(); $("#ubahIdDesa option:not([idKecamatan=" + idKecamatan + "])").hide() $("#ubahIdDesa option:not([idKecamatan=" + idKecamatan + "])").show() });</pre>

avatar ruben46
@ruben46

20 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Tanggapan

IdKecamatan= itu diganti

Option di dalam #ubahIdDesa tambahin sebuah parameter data-id_kecamatan

Pokok nya nambahin parameter dlu yg di option

data-id_kecamatan

apakah seperti ini kak?

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

avatar ruben46
@ruben46

20 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Tanggapan

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

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

avatar ruben46
@ruben46

20 Kontribusi 0 Poin

Dipost 1 tahun yang lalu

Login untuk ikut Jawaban