Themeable jQuery Select Box Enhancement Plugin - select-mania

Themeable jQuery Select Box Enhancement Plugin - select-mania

The select-mania jQuery plugin transforms the normal select element into a searchable, clearable, themeable, AJAX-enabled dropdown list with ease.

1. Include the core style sheet and a theme CSS for your choice in the head section of the document.

<!-- Core -->
<link href="src/select-mania.css" rel="stylesheet">
<!-- Themes -->
<link href="src/themes/select-mania-theme-darkblue.css" rel="stylesheet">
<link href="src/themes/select-mania-theme-green.css" rel="stylesheet">
<link href="src/themes/select-mania-theme-orange.css" rel="stylesheet">
<link href="src/themes/select-mania-theme-red.css" rel="stylesheet">
<link href="src/themes/select-mania-theme-square.css" rel="stylesheet">

2. Include jQuery library and the jQuery select-mania plugin's script at the bottom of the document.

<script src="//"></script>
<script src="src/select-mania.js"></script>

3. Just initialize the plugin on existing select element and done.


4. Optgroup and option icons are supported as well:

<optgroup data-icon="fa fa-share" label="Group">
  <option value="1" data-icon="fa fa-facebook">Facebook</option>
  <option value="1" data-icon="fa fa-twitter">Twitter</option>
  <option value="1" data-icon="fa fa-google-plus">Google+</option>

5. Set the size of the dropdown select list.

  width: '100%',
  size: 'medium', // 'small', 'large'

6. Set the themes you prefer.

  themes: ['square','red']

7. Enable/disable select controls.

  // enable removable
  removable: false,
  // enable searchable
  search: false,

8. Set the placeholder text:

  placeholder: 'Please select me!'

9. To enable AJAX content support:

  ajax: function(search, page, data, callback) {
        type: 'POST', 
        url: 'myAjaxScript.php', 
        data: {
            search: search, 
            page: page, 
            custom: data.custom
        success: function(html) {
  data: {}

10. If you want to create a new theme, follow these steps:

.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-inner { border: 1px solid #D6D6D6; }
.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-value {
 border: 1px solid [YOUR-COLOR];
 background-color: [YOUR-COLOR]; color: white; }
.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania { border: 1px solid #D6D6D6; }
.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-search-input {
  border: 1px solid #D6D6D6;
  color: #5A5A5A;
.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-item:hover { background:[YOUR-HOVER-COLOR];
.select-mania-theme-[CHANGE-THE-NAME-HERE] {
 background: [YOUR-COLOR]; color: white; }

11. API methods.

// update
// destroy
// check
if($('select').selectMania('check')) {
  // do something
// get selected values
var values = $('select').selectMania('get');
// set new values
$('select').selectMania('set', [
        value: '20', 
        text: 'Value number twenty'
        value: '60', 
        text: 'Value number sixty'
// clear

This awesome jQuery plugin is developed by pitininja. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 28.10.2017
  • Source