Mobile-friendly Custom Select Box Plugin - jQuery Select.js

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.