Tadi pagi saya tidak sengaja membuka grup online dan menemukan pertanyaan terkait select chain, ada dua combobox yang ketika combobox pertama diklik, maka combobox kedua menunjukkan nilai yang berhubungan dengan combobox pertama. Seperti nama kecamatan muncul berdasarkan nama kecamatan, dll. Ok, tanpa basa-basi lagi mari ikuti langkah-langkah pembuatannya menggunakan JavaScript sebagai aktor utamanya. Hehe
Oh ya, pada contoh ini untuk datanya sendiri saya menggunakan data statis, dalam kasus lapangan datanya bisa dinamis (mengambil dari database, API, dll), tetapi jika Anda sudah memahami konsepnya, itu mudah. Dalam contoh ini saya ingin menunjukkan nama-nama seri prosesor dari dua merek besar, Intel dan AMD
Buat file html, kita beri nama index. konten html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Select Chain</title> </head> <body> <label for="opsi">Pilihan Processor:</label><br> <select name="opsi" id="opsi"> <option value="intel">Intel</option> <option value="amd">AMD</option> </select><br> <label for="subopsi">Seri:</label><br> <select name="subopsi" id="subopsi"></select> <script src="script.js"></script> </body> </html>
Coba diperhatikan baris 12 dan 18 pada file index.html terdapat id untuk tag yaitu opsi dan subopsi, keduanya masing-masing digunakan sebagai trigger dan manipulasi DOM.
Selanjutnya, buat file javascript bernama script. js yang isinya sebagai berikut
document.querySelector('#opsi').addEventListener('change', function() { const opsi = document.querySelector('#opsi').value; const json = { "intel": ["Core i3", "Core i5", "Core i7", "Core i9"], "amd": ["Athlon", "Duron", "Sempron", "Turion", "Ryzen"] } let res = ""; const len = (opsi == "intel") ? json.intel.length : json.amd.length; for(let i=0; i<len; i++) { res += "<option value='"+ json[opsi][i] + "'>" + json[opsi][i] + "</option>"; } document.querySelector("#subopsi").innerHTML = res; }); _
Ketika option trigger diubah, ubah nilainya menjadi Intel atau AMD, maka javascript akan mengulang data json dan mengambil nilainya lalu mengisinya ke dalam variabel res. Terakhir suboption id diisi dengan nilai dari res tadi
Setelah dijalankan menggunakan web browser, ketika processor Intel dipilih maka akan muncul Core i3, Core i5, Core i7 dan Core i9 pada suboption combobox. Begitu pula ketika AMD dipilih, maka yang muncul pada sub-option adalah Athlon, Duron, Sempron, Turion dan Ryzen
Kali ini saya akan menjelaskan tentang Selected Selector JQuery. Apa itu Pemilih Terpilih?
- Sintaks yang digunakan
- Menggunakan Pemilih Terpilih dalam satu dropdown pilihan
- Menggunakan Pemilih yang Dipilih dalam opsi pemilihan ganda
$( '#idPilih opsi. dipilih' )
Tidak masalah jika daftar datanya hanya sedikit, sekitar puluhan data, masalahnya ketika daftar datanya mencapai ratusan atau 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
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
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="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <!-- jika menggunakan bootstrap4 gunakan css ini --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css"> <!-- cdn bootstrap4 --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.6.0/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="//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="//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <!-- js untuk select2 --> <script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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
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
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