FancySelect – A better & beautiful select
FancySelect is a lovingly crafted plugin created by Octopus Creative and it is aiming to provide a better looking anf fancy select for all the web developers. It is dead easy to use and you just need to target any select element on the page, and call .fancySelect() on it. You can download the plugin from Github and if you have any ideas how you can contribute and make it better, you can get in toch with the guys from Octopus Creative.
Basic Usage
FancySelect is easy to use. Just target any select element on the page, and call .fancySelect() on it. If the select has an option with no value, it’ll be used as a sort of placeholder text.
By default, FancySelect uses native selects and styles only the trigger on mobile devices. To override this, pass an object with forceMobile set to true when initializing it.
HTML
<select class="basic"> <option value="">Select something…</option> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Sit</option> <option>Amet</option> </select>
JavaScript
$('.basic').fancySelect();
Updating Options
If the options in your select change after initializing FancySelect, you can tell it to rebuild the list of options by triggering replace on the select element.
JavaScript
var mySelect = $('.my-select'); mySelect.fancySelect(); mySelect.append('<option>Foo</option><option>Bar</option>'); mySelect.trigger('update');