jQuery plugin for custom select menus

A simple jQuery plugin, which helps with creating custom select menus in the form of our web projects.

Create custom select menus plugin

This nice jQuery plugin helps in creating custom select menus easy.

Custom select menus with jQuery
Custom select menus with jQuery


1. Add the plugin to the document:

<script src="custom-select-menu.jquery.js"></script>

2. Call the customSelectMenu() method on any select element in order to start customzing it:


This will take a regular select menu such as this:

<select name="color-menu" id="my-color-menu">
  <option>Choose a color...</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>

And turn it into this:

<div class="custom-select-menu" tabindex="0" id="my-color-menu">
  <label>Choose a color...</label>
  <ul style="display: none;">
    <li data-option-value="" class="selected">Choose a color...</li>
    <li data-option-value="red">Red</li>
    <li data-option-value="green">Green</li>
    <li data-option-value="blue">Blue</li>
  <input type="hidden" name="color-menu" value="" />

We can set the options by passing them to the customSelectMenu() method:

  menuClass : 'my-menu',
  openedClass : 'shown',
  selectedClass : 'active',
  selectionMadeClass : 'has-been-selected'

Certainly we can also adjust the styles of menu in CSS.

License: Creative Commons.





You may also like similar solution:

jQuery EasyDropDown