Saya tidak tahu cara memberi nilai atau set value ke select pada html lewat jquery

jadi saya membuat sebuah program back-end pembayaran sekolah. untuk menambahkan data orangtua saya sudah bisa dengan menggunakan code php biasa dan sudah tersimpan di database. namun ketika saya ingin edit data orangtua saya sediki kesulitan karena tampilan untuk menambah dan edit data menggunakan satu tampilan yang sama.

berikut tampilan programnya

untuk codenya saya mengkombinasikan php dengan jquery. yang ingin saya lakukan adalah gimana caranya mengisi semua value input melalui jquery terutama dibagian input-an select?

berikut syntax codenya:

1. code pada tabel data orang tua

<tbody>
   <?php
        $ortu = _getClass('Orangtua')->read_data();
        $no = 1;
        for($i=0;$i<count($ortu);$i++){?>
            <tr>
            <td><?= $no++?></td>
            <td><?= $ortu[$i]['nama_ayah']?></td>
            <td><?= $ortu[$i]['nama_ibu']?></td>
            <td><?= $ortu[$i]['username'] ?></td>
            <td>
                <button class="btn btn-xs btn-info btn-edit-kls"
                   onclick="editortu('<?=$ortu[$i]['id_orang_tua']?>')" data-sidepanel-
                   toggle=".app-sidepanel" name="btnedit" type="submit">
                   <span class="fa fa-edit"></span>
                </button>
            </td>
            </tr>
   <?php }?>
</tbody>

2. code pada tampilan edit dan tambah

<form action="" class="form-horizontal" method="POST">
            <div class="container">
                <input type="hidden" name="idortu" id="idortu">
                <div class="form-group">
                    <label>Nama Ayah</label>
                    <input name="ayah" type="text" id="ayah" class="form-control">
                </div>
                <div class="form-group">
                    <label>Nama Ibu</label>
                    <input name="ibu" type="text" id="ibu" class="form-control">
                </div>
                <div class="form-group">
                    <label>Siswa</label>
                    <div class="app-widget-tile">
                        <label for="">Kelas</label>
                        <select class="bs-select" onchange="carisiswa()" id="kelas1" name="kelas">
                            <option value=""></option>
                            <?php
                            // require 'pdo/Orangtua.php';
                            $ortu = new Orangtua();
                            $kelas = $ortu->read_kelas();
                                // $siswa = _getClass('Orangtua')->read();
                                for ($i=0; $i < count($kelas); $i++) {
                            ?>
                            <option value="<?= $kelas[$i]['id_kelas']?>"><?= $kelas[$i]['kelas']?></option>
                            <?php } ?>
                        </select>
                        <label for="">Nama Siswa</label>
                        <select class="form-control" data-live-search="true" id="siswa1" name="siswa">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Username</label>
                    <input name="username" type="text" id="user" class="form-control">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input name="password" type="Password" id="pass" class="form-control">
                </div>
                <div class="form-group">
                    <input type="submit" name="btnSimpan" class="btn btn-info" value="Simpan">
           </div>
      </div>
</form>

3. code jquery

function editortu(id) {
    console.log(id);
    $.ajax({
        type: "post",
        url: "pdo/perantara.php",
        data: {
            req : 'ortu',
            idortu : id
        },
        dataType: "json",
        success: function (response) {
            console.log(response);
            $.each(response, function (i, data) {
                $('#idortu').val(data.id_orang_tua);
                $('#ayah').val(data.nama_ayah);
                $('#ibu').val(data.nama_ibu);
                $('#kelas1').val(data.id_kelas);
                $('#siswa1').val(data.nis);
                $('#user').val(data.username);
                $('#pass').val(data.password);
            });
        }
    });
}

avatar ilahana
@ilahana

4 Kontribusi 1 Poin

Diperbarui 5 tahun yang lalu

3 Jawaban:

Jawaban Terpilih

coba ini <pre> $('#kelas1').val(data.id_kelas).trigger('change'); $('#siswa1').val(data.nis).trigger('change'); </pre>

avatar dianarifr
@dianarifr

642 Kontribusi 316 Poin

Dipost 5 tahun yang lalu

select yang pertama memilih kelas <pre> &lt;label for=""&gt;Kelas&lt;/label&gt; &lt;select class="bs-select" onchange="carisiswa()" id="kelas1" name="kelas"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;?php // require 'pdo/Orangtua.php'; $ortu = new Orangtua(); $kelas = $ortu-&gt;read_kelas(); // $siswa = _getClass('Orangtua')-&gt;read(); for ($i=0; $i &lt; count($kelas); $i++) { ?&gt; &lt;option value="&lt;?= $kelas[$i]['id_kelas']?&gt;"&gt;&lt;?= $kelas[$i]['kelas']?&gt;&lt;/option&gt; &lt;?php } ?&gt; &lt;/select&gt; </pre>

select yang kedua memilih nama siswa <pre> &lt;label for=""&gt;Nama Siswa&lt;/label&gt; &lt;select class="form-control" data-live-search="true" id="siswa1" name="siswa"&gt; &lt;/select&gt; </pre>

pada select tidak ada option, karena sebelum select pertama dipilih maka select dua belum ada isinya. lebih mudahnya saya menggunakan dinamik select.

kalau semisal saya memakai code yang diusulkan dianarifr. apakah nanti pilihannya atau optionnya cuma satu doang? soalnya belum ada pilihannya sebelum select satu menjalankan event onchange

avatar ilahana
@ilahana

4 Kontribusi 1 Poin

Dipost 5 tahun yang lalu

Tanggapan

iyaa bang akan menjadi satu saja..

iya cuma satu, kalau mau tampil yg lain. ambil dulu data untuk select kedua

ok makasih gan

Saya pernah mengalami hal demikian bang.. dan saya membuat sedikit trik untuk mengakalinya wkwkwkw... jadi saya membuat 2 form, lebih tepatnya saya copy form input dan saya rubah id formnya. selanjutnya ketika event button click di tambah data, saya memanggil form yang id-nya tambah data... begitu juga untuk edit.. jadi nanti tidak ribet ketika mau action submit formnya.

kalo kamu pakai dinamik select box yaa pakai ajax aja lagi sama seperti form input, kan select box pertama sudah mempunyai nilai, jadi tinggal buat ajaxnya, sekalian untuk data select box kedua..

semoga membantu ..

avatar ghonijee
@ghonijee

41 Kontribusi 25 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban