Download
User Rating: 0/5 ( 0 votes)
FancySelect is a better select for discerning web developers. It is easy to use. Just include jQuery or Zepto, 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.
Source: code.octopuscreative.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" media="screen, projection" href="fancySelect.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="fancySelect.js"></script>
2. 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>
3. JAVASCRIPT
$('.basic').fancySelect();
4. EXAMPLES
Updating Options
If the options in your select change after initializing FancySelect, you can tell it to rebuild the list of options by triggering update.fs on the select element.
JavaScript
var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('<option>Foo</option><option>Bar</option>');
mySelect.trigger('update.fs');
Enabling/Disabling
FancySelect will automatically pick up your select's disabled property on initialization. If you need to enable or disable it again later, you can do that by triggering enable.fs or disable.fs on your select element.
HTML
<select class="my-select" disabled>
<option>First Option</option>
<option>Second Option</option>
</select>
JavaScript
var mySelect = $('.my-select');
mySelect.fancySelect(); // currently disabled because of html property
// later…
mySelect.trigger('enable.fs'); // now enabled
// even later…
mySelect.trigger('disable.fs'); // now disabled again
Templates
If you need to do something fancy with the trigger or the individual options, you can use triggerTemplateor optionTemplate, which are both functions passed an option element (jQuery-wrapped) and returning an HTML string to render.
HTML
<select class="bulbs">
<option data-icon="old">Incandescent</option>
<option data-icon="curly">CFL</option>
<option data-icon="work">Halogen</option>
</select>
$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
return optionEl.text() + '<div class="icon-' + optionEl.data('icon') + '"></div>';
}
}
});