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.

DEMO DOWNLOAD

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');