jQuery flat style drop-down box beautification plug-in FancySelect usage guide_jquery

FancySelect is a small and practical jQuery drop-down box beautification plug-in. This drop-down box beautification plug-in adopts a flat design style and is one of the first choice drop-down box beautification plug-ins for developers who pursue fashion.

How to use

HTML structure

FancySelect is very simple to use and can be used in conjunction with jQuery or Zepto. Place some drop-down box components on the page, and then call the drop-down box plug-in through the .fancySelect() method. If an option in the dropdown box has no value, the plugin will use some kind of placeholder text to replace it.

By default, FancySelect only uses native drop-down boxes and styles on iOS devices. If you want to override it, set forceiOS to true when the drop-down box plugin is initialized.

FancySelect can also specify the style through the data-class attribute of the element. You can use this method to specify different styles of select drop-down boxes.

Copy code The code is as follows:

Select something…
Lorem
Ipsum
Dolor
Sit
Amet

JAVASCRIPT

Copy code The code is as follows:

$('.basic').fancySelect();

Update options

If the options of your drop-down box are modified after the plugin is initialized, you can tell the plugin to update the options list by triggering the update.fs method on the drop-down box.

Copy code The code is as follows:

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

Enable/disable drop-down box

The FancySelect drop-down box plug-in will automatically set the drop-down box to the disabled state after initialization. If you need to reset the state of the drop-down boxes, you can use the enable.fs or disable.fs methods on the select element to modify them.

Copy code The code is as follows:

First Option
Second Option

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

If you need to create some personalized effects, you can use the triggerTemplate and triggerTemplate methods, which both return an HTML string through the option option:

Copy code The code is as follows:

Incandescent
CFL
Halogen

$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
          return optionEl.text() '
'; } })

You can listen to the change.fs event when the drop-down box option changes:

Copy code The code is as follows:

    First Option
    Second Option

var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // trigger the DOM's change event when changing FancySelect