Cara menggunakan html dropdownlist selected value

Assalamualaikum, wr. wb. teman-teman. Kali ini kita akan belajar bagaimana Cara Membuat Value Bindings pada Select Option dengan Vue Js. Buat kalian yang langsung nyasar kesini, saya sarankan untuk melihat tutorial awal Vue Js yang pertama Disini. Dan tutorial kedua yang menjelaskan aplikasi yang digunakan sebagai kode editor dan untuk demo atau menjalankan kode pada tutorial kita Disini. Kita akan menggunakan Codepen untuk kode editornya.

Pada artikel sebelumnya kita sudah belajar Cara Membuat Value Binding Menggunakan Radio Button. Sekarang kita akan belajar bagaimana jika melakukan value binding menggunakan select-option.

Baca: Cara Membuat Value Binding Menggunakan Radio Button

Pada select option ini sama dengan radio button dimana kita hanya dapat memilih salah satu dari beberapa option. Namun secara penggunaannya, select-option digunakan ketika kita memiliki pilihan yang sangat banyak sedangkan radio button sebaliknya. Hal ini untuk membuat User Experience kita lebih baik.

Baris 1: Seperti biasa kita harus instansiasi object Vue, Oh ya jangan lupa import CDN Vue Js-nya agar kode Vue Js-nya bisa jalan.
Baris 2: Kita definisikan nama elemen yang akan menggunakan data Vue kita.
Baris 4 - 10: Kita buat beberapa object berbeda yaitu selected dengan nilai '', multi_select dengan value 'A' dan options dengan value array 'A', 'B', 'C'.

Kemudian ketikkan kode HTML-nya seperti berikut.

Baris 2 - 8: Kita buat input dengan type radio dan v-model="selected" dimana ketika kita klik salah satu option-nya maka akan menghasilkan output berupa data berdasarkan value masing-masing option. Ini adalah cara biasa dengan mengambil value pada tiap value option.
Baris 9 - 15: Sama seperti sebelumnya, tapi disini kita dapat memperoleh value-nya secara multiple sekaligus.
Baris 16 - 21: Jika kita ingin menggunakan perulangan, maka kita dapat dan harus menggunakan v-bind:value untuk memperoleh value-nya.

Untuk Demonya silahkan cek dibawah ini.

See the Pen Vue JS Select Option by indeveloper.id (@indeveloper) on CodePen.

Jadi ada 3 poin yang kita pelajari dari tutorial kali ini:

Cara membuat value binding Select Option dengan cara biasa.
Cara membuat multiple value binding Select Option.
Cara membuat value binding Select Option dengan perulangan.

Sekian tutorial kali ini, semoga bermanfaat, sekian Wassalamualaikum, wr. wb.

Penting: Jika Anda menghapus nilai dengan warna yang telah ditetapkan dari rentang sumber kriteria saat dropdown diisi dari rentang, nilai dan warna akan tetap muncul dalam kriteria, tetapi tidak dapat diedit. Untuk menghapus nilai dari daftar, ubah rentang sumber atau warna item lain.

Tidak masalah jika list datanya hanya sedikit, sekitar puluhan data saja, yang jadi masalah adalah saat list data sudah mencapai ratusan bahkan ribuan. Dimana user akan sangat kesal mencari tumpukan data yang sangat banyak tanpa ada fitur pencarian.

Nah, pada kesempatan kali ini kita akan mengimplementasikan select2 pada option select. Select2 akan membuat fitur pencarian pada option select, sehingga saat ada tumpukan data yang banyak, user hanya perlu mengetikan beberapa huruf yang dicari maka hasilnya akan langsung terlihat.

Contoh select2

Select2 biasanya digunakan untuk filtering data, contohnya bisa digunakan untuk mencari nama siswa yang jumlahnya bisa ratusan hingga ribuan, atau bisa juga digunakan untuk filtering data wilayah seperti provinsi, kecamatan, atau kelurahan. Intinya select2 biasa digunakan untuk memudahkan pemilihan data dengan daftar yang sangat banyak.

Baca Artikel Lain ✨📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more

Cara Menggunakan Select2

Membuat select2 sangat mudah sekali, kalian hanya perlu membuat tag option select seperti biasa, lalu menambahkan id pada option select tersebut dan menambahkan sedikit javascript. Konfigurasinya sangat mudah sekali, secara default kalian langsung bisa menggunakan select2 tanpa banyak melakukan pengaturan.

Berikut ini ada dua contoh select2 yang telah saya buat dalam sebuah file. Yaitu select2 single select box dan select2 multiple select box. Silahkan buat sebuah file baru, lalu copy script di bawah ini dan pastekan ke dalam file tersebut

    

<!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 save file, lalu jalankan file tersebut di browser kalian. Maka hasilnya akan tampak seperti gambar di bawah ini. Berikut ini contoh select2 single select box, dimana ada penambahan fitur pencarian.

Select2 single select box

Berikut ini adalah contoh select2 multiple select box, selain ada fitur pencarian, kalian bisa memilih lebih dari satu data. Select2 model ini cocok digunakan pada post, dimana setiap post memiliki kategori dan tag yang lebih dari satu jenis.

Select2 multiple select box

Jika kalian ingin menampilkan data yang bersumber dari database. Caranya juga mudah sekali, kalian tinggal lakukan looping data pada option selectnya saja.

Ok sekian tutorial cara membuat pencarian dalam option select dengan select2. Semoga tutorial singkat ini dapat bermanfaat, jika ada yang ingin ditanyakan silahkan tinggalkan pesan kalian di kolom komentar di bawah ini.

kode html

Cara menggunakan html dropdownlist selected value

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social