Creating Custom Select Options With jQuery - custom-select
File Size: | 11.1 KB |
---|---|
Views Total: | 4405 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

custom-select is a jQuery plugin which converts the normal select element into an accordion-style dropdown list with custom markups for better styling & SEO.
How to use it:
1. Load the stylesheet custom-select.css
in the document that provides the default styles for the dropdown list.
<link rel="stylesheet" href="custom-select.css">
2. Load the necessary jQuery library and custom-select plugin's script at the end of the document.
<!-- Necessary jQuery instance file --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Custom select script file --> <script src="custom-select.min.js"></script>
3. Just call the function on the existing select element and done.
<select class="demo"> <option value="select1-value1">Select one - Value 1</option> <option value="select1-value2">Select one - Value 2</option> <option value="select1-value3">Select one - Value 3</option> </select>
$('.demo').customSelect();
4. Set the element type to receive the default text (a, div, p, h).
$('.demo').customSelect({ defaultElement: 'p' });
5. Set the default text to display in the select element.
$('.demo').customSelect({ defaultText: '-' });
6. Decide whether to submit form when select option is selected.
$('.demo').customSelect({ autoFormSubmit: false });
7. Default CSS selectors.
$('.demo').customSelect({ // Class to wrapper all the custom select elements. classContainer: '.custom-select-container', // Class to define current selected option text. classCurrent: '.custom-select-current', // Class to list of select options. classOptions: '.custom-select-options' });
8. Specify the animation speed.
$('.demo').customSelect({ animationSpeed: 100 });
Change log:
2017-12-05
- Custom select to selected items
2017-11-07
- Improve function finder
2017-09-29
- Improve function finder
2017-09-28
- Add animation time control feature
This awesome jQuery plugin is developed by williankeller. For more Advanced Usages, please check the demo page or visit the official website.