Cara menggunakan pilih nilai html

jadi saya membuat program back-end pembayaran sekolah. untuk menambah data orang tua saya sudah bisa menggunakan kode php biasa dan sudah tersimpan di database. tapi pas mau edit data orang tua agak susah karena tampilan untuk tambah dan edit data menggunakan tampilan yang sama. berikut tampilan program

untuk kodenya saya gabungkan php dengan jquery. Yang ingin saya lakukan adalah bagaimana mengisi semua nilai input melalui jquery, terutama di bagian input pilih? . 1. kode pada tabel data induk

   read_data();
        $no = 1;
        for($i=0;$i

2. kode pada tampilan edit dan tambahkan

Nama Ayah

Nama Ibu

Siswa

Username

Password

3. kode 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);
            });
        }
    });
}

Tidak masalah jika daftar datanya sedikit, sekitar puluhan data, masalahnya ketika daftar datanya mencapai ratusan bahkan ribuan. Dimana pengguna akan sangat kesal jika menemukan tumpukan data yang sangat banyak tanpa adanya fitur pencarian

Nah pada kesempatan kali ini kita akan mengimplementasikan select2 pada pilihan select. Select2 akan membuat fitur pencarian pada pilihan pilih, sehingga ketika data banyak, pengguna hanya perlu mengetikkan beberapa huruf yang dicari dan hasilnya akan langsung terlihat

Contoh pilih2

Select2 biasanya digunakan untuk memfilter data, misalnya bisa digunakan untuk mencari nama siswa yang bisa ratusan hingga ribuan, atau bisa juga digunakan untuk memfilter data daerah seperti provinsi, kecamatan, atau desa. Intinya select2 biasa digunakan untuk memudahkan pemilihan data dengan register yang sangat besar

Baca Artikel Lainnya ✨📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more📰 2. Cara Menyembunyikan/Menampilkan Input Password dengan Javascript dan Bootstrap baca selengkapnya📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Bootstrap Spinner Sebagai Indikator Loading di Php read more

Cara Menggunakan Select2

Pembuatan select2 sangat mudah, anda hanya perlu membuat tag option select seperti biasa, lalu tambahkan id pada option select dan tambahkan sedikit javascript. Konfigurasinya sangat mudah, secara default Anda bisa langsung menggunakan select2 tanpa melakukan banyak pengaturan

Berikut adalah dua contoh select2 yang telah saya buat dalam sebuah file. Yaitu pilih2 kotak pilih tunggal dan pilih2 kotak pilih ganda. Silakan buat file baru, lalu salin skrip di bawah ini dan tempelkan ke dalam file

    

<!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- css untuk select2 -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
        <!-- jika menggunakan bootstrap4 gunakan css ini  -->
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@ttskch/[email protected]/dist/select2-bootstrap4.min.css">
        <!-- cdn bootstrap4 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    </head>
    
    <body>
        <div class="container mt-5">
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <label>Single Select Box</label>
                        <select id="kota" name="kota" class="form-control">
                            <option value=""></option>
                            <option value="Jakarta">Jakarta</option>
                            <option value="Bogor">Bogor</option>
                            <option value="Depok">Depok</option>
                            <option value="Tangerang">Tangerang</option>
                            <option value="Bekasi">Bekasi</option>
                            <option value="Bandung">Bandung</option>
                            <option value="Semarang">Semarang</option>
                            <option value="Yogyakarta">Yogyakarta</option>
                            <option value="Surabaya">Surabaya</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <div class="card-body">
                    <div class="form-group">
                        <label>Multi Select Box</label>
                        <select id="kota2" name="kota2[]" class="form-control" multiple="multiple">
                            <option value=""></option>
                            <option value="Jakarta">Jakarta</option>
                            <option value="Bogor">Bogor</option>
                            <option value="Depok">Depok</option>
                            <option value="Tangerang">Tangerang</option>
                            <option value="Bekasi">Bekasi</option>
                            <option value="Bandung">Bandung</option>
                            <option value="Semarang">Semarang</option>
                            <option value="Yogyakarta">Yogyakarta</option>
                            <option value="Surabaya">Surabaya</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- wajib jquery  -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
        <!-- js untuk bootstrap4  -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
            crossorigin="anonymous"></script>
        <!-- js untuk select2  -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#kota").select2({
                    theme: 'bootstrap4',
                    placeholder: "Please Select"
                });
    
                $("#kota2").select2({
                    theme: 'bootstrap4',
                    placeholder: "Please Select"
                });
            });
        </script>
    </body>
    
    </html>

Silahkan simpan file tersebut, kemudian jalankan file tersebut di browser Anda. Maka hasilnya akan terlihat seperti gambar di bawah ini. Berikut adalah contoh kotak pilih tunggal pilih2, di mana ada fitur pencarian tambahan

Pilih2 kotak pilih tunggal

Berikut ini adalah contoh kotak pilih ganda pilih2, selain memiliki fitur pencarian, Anda dapat memilih lebih dari satu data. Model Select2 ini cocok digunakan pada postingan, dimana setiap postingan memiliki lebih dari satu jenis kategori dan tag

Pilih2 beberapa kotak pilih

Jika ingin menampilkan data yang bersumber dari database. Caranya juga sangat mudah, Anda hanya perlu mengulang data pada opsi pilih

Ok sekian tutorial cara mencari di opsi select dengan select2. Semoga tutorial singkat ini bermanfaat, jika ada pertanyaan silahkan tinggalkan pesan anda pada kolom komentar dibawah

kode html

Cara menggunakan pilih nilai html

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social