Plugin Jquery Custom Select Box

Ini ialah plugin jQuery yang Saya buat menurut konsep selectbox kustom yang pernah Saya temukan dan Saya catat di sini. Fungsinya ialah untuk mengubah tampilan selectbox biasa menjadi selectbox yang gampang dimodifikasi tampilannya. Saya suka dengan metodenya yang sangat sederhana untuk mengubah tampilan selectbox orisinil tanpa harus menghilangkan elemen aslinya dan hanya membungkusnya dengan elemen baru, sehingga kita dapat menyesuaikan dimensi selectbox palsu menurut dimensi selectbox yang orisinil tanpa memakai perhitungan JavaScript yang rumit. Di sini Saya hanya memanfaatkan dimensi selectbox orisinil untuk mengubah ukuran lebar elemen inline-block:

Lihat Demo Unduh Plugin Unduh Plugin (Minified) Unduh CSS Unduh CSS (Minified)

Penggunaan

Letakkan CSS sebelum jQuery dan plugin sesudah jQuery, kemudian aktifkan .customSelectBox() pada elemen <select> yang dikehendaki. Setelah itu Anda dapat menjalankan perintah-perintah lain yang diharapkan terhadap elemen selectbox orisinil melalui event .change():

<link href="css/jquery.select.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/jquery.select.min.js"></script> <script> $(document).ready(function() {     $('select').customSelectBox().change(function() {         // Lakukan sesuatu di sini menyerupai halnya ketika kita melaksanakan sesuatu ...         // ... dengan event `change` jQuery pada elemen selectbox         var val = this.value;         alert(val);     }); }); </script>

Itu saja.

Konfigurasi Lanjutan

Konfigurasi lanjutan ini hanya berputar di sekitar modifikasi kelas. Tidak ada efek-efek khusus perhiasan pada plugin ini:

$('select').customSelectBox({     selectboxClass: 'styled-select',     buttonClass: 'curr',     selectedClass: 'selected',     disabledClass: 'disabled',     focusedClass: 'focused' }).change(function() {});

Pilihan Modifikasi Kelas
Opsi	Keterangan
selectboxClass	Nama kelas pembungkus luar
buttonClass	Nama kelas tombol pemicu drop down sajian (penayang nilai opsi terseleksi)
selectedClass	Nama kelas opsi terseleksi (elemen `<option>` dengan atribut `selected="true"`)
disabledClass	Nama kelas opsi mati (elemen `<option>` dengan atribut `disabled="true"`)
focusedClass	Nama kelas tombol selectbox terfokus (saat diklik)

Keterangan dan citra markup HTML tergenerasi selengkapnya dapat Anda lihat pada halaman demo

Hanya untuk proyek skala kecil. Tidak bekerja pada selectbox dengan optgroup.

Sumber https://www.dte.web.id/