Select2 adalah plugin untuk pengganti dropdown dimana dropdown tersebut lebih canggih dan banyak fitur yang menarik. Select2 biasanya digunakan pada form, atau pada tambahan sesuai kebutuhan pengguna nya. untuk dokumentsasi lengkap nya bisa kunjungi situs official berikut Select2
Pada kesempatan kali ini saya akan menunjukan bagaimana cara implementasi select2 dengan data dari Json pertama tama masukan plugin select2 di dalam tag <head> :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
Kemudian kira buat file Jquery atau javascript bisa di buat seperti berikut :
<script>
var data = [
{
id: 0,
text: 'ANIMASI'
},
{
id: 1,
text: 'MULTIMEDIA'
},
{
id: 2,
text: 'TEKNIK JARINGAN'
},
{
id: 3,
text: 'TEKNIK KOMPUTER'
},
{
id: 4,
text: 'SISTEM ANALIS'
}
];
$(document).ready(function(){
$(".select2-json").select2({
data: data
})
});
</script>
Bisa di lihat pada var data =[]; adalah array json untuk mengisi data pada class .select2-json maka hasilnya akan seperti berikut :
Untuk kode lengkap nya bisa di lihat di bawah ini :
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
var data = [
{
id: 0,
text: 'ANIMASI'
},
{
id: 1,
text: 'MULTIMEDIA'
},
{
id: 2,
text: 'TEKNIK JARINGAN'
},
{
id: 3,
text: 'TEKNIK KOMPUTER'
},
{
id: 4,
text: 'SISTEM ANALIS'
}
];
$(document).ready(function(){
$(".select2-json").select2({
data: data
})
});
</script>
</head>
<body>
<div class="container mt-3">
<form action="/action_page.php">
Pilih Jurusan : <select class="select2-json form-control" style="width: 400px;"></select>
</form>
</div>
</body>
</html>
Semoga berhasil ..
0 Komentar