This plug-in allow you customize your form select select options easily and with a small library.
You can define some setting to start or just use the default options, follow:
Simple and standard use, just define the current select class.
This use will transform all the selects that contains the select-one
class into a custom select.
$('.select-one').customSelect();
Adding a custom title to your select (default - ): This setup will add a custom title inside your custom select.
$('.select-two').customSelect({
defaultText: 'Select your option here'
});
Changing click element (default p). This setup will replace the tag click element, example, if you need the click became a div or a heading.
$('.select-three').customSelect({
defaultElement: 'h5',
});
Allow you to define an animation speed, that means you can set values to your dropdown open fast or slowly (default 100 - here using 600).
$('.select-four').customSelect({
animationSpeed: 600
});
Submit form when select an option (default false). If exist an element with the submit type, it will be hidden automatically and the form will be submitted automatically when option is changed.
$('.select-five').customSelect({
autoFormSubmit: true
});
This option allow your select options to display a search filter, this way you might find your option just typing the initial word (default false).
$('.select-six').customSelect({
searchField: true,
searchText: 'Search your option here...', // optional
});
See this page for live example: https://williankeller.github.io/jquery-custom-select/