Mobile-friendly Custom Select Box Plugin - jQuery Select.js
File Size: | 10.7 KB |
---|---|
Views Total: | 1168 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny yet robust custom select jQuery plugin that converts standard <select> elements into searchable, checkable, mobile-friendly, and nice-looking dropdown lists for a better selection experience.
More Features:
- Display options in a fullscreen menu list on mobile devices.
- Show custom images at the beginning of the options.
- Show radio buttons at the end of the options.
- Open the dropdown list by clicking or hovering.
- Easy to implement with a single JS call.
See Also:
- 10 Best Cascading Dropdown Plugins
- 10 Best Multiple Select Plugins
- 10 Best Custom Checkbox And Radio Input Replacements
How to use it:
1. Download and import the select.js plugin's files.
<link rel="stylesheet" href="/path/to/css/jquery.select.css"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery.select.js"></script>
2. Call the function customSelect
on the select
element and the plugin will take care of the rest.
<select> <option>Select Country</option> ... options here ... </select>
$('select').customSelect({ // plugin options here })
3. This example shows how to add images to the beginning of the options using the beforeRenderList
function.
$('select').customSelect({ beforeRenderList: (item) => { return `<img src="/path/to/images/svg/${item.value.toLowerCase()}.svg" width="20" /> ${item.text}` }, })
4. Enable/disable the live search functionality. Default: true.
$('select').customSelect({ search: false, })
5. Determine whether to open the dropdown list when hovering over the select element. Default: false.
$('select').customSelect({ hover: true, })
6. Enable/disable the mobile view. Default: true.
$('select').customSelect({ responsive: false, })
7. Determine whether to show radio buttons at the end of the options. Default: true.
$('select').customSelect({ checkboxes: false, })
8. Determine whether to auto scroll the dropdown list to the selected option. Default: true.
$('select').customSelect({ scrollToSelect: false, })
9. Determine whether to auto close the dropdown list after an option is selected. Default: false.
$('select').customSelect({ closeAfterSelect: true, })
10. Trigger a function after selecting an option.
$('select').customSelect({ onSelect: (element, item) => { console.log(element, item) } })
This awesome jQuery plugin is developed by Senziousjs. For more Advanced Usages, please check the demo page or visit the official website.