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 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?
$( '#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
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 |
Cara menggunakan opsi pilih javascript dipilih
Pos Terkait
Copyright © 2024 ketajaman Inc.
