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="//code.jquery.com/jquery.min.js"></script>
<script src="src/select-mania.js"></script>

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

$('select').selectMania();

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>
  ...
</optgroup>

5. Set the size of the dropdown select list.

$('select').selectMania({
  width: '100%',
  size: 'medium', // 'small', 'large'
});

6. Set the themes you prefer.

$('select').selectMania({
  themes: ['square','red']
});

7. Enable/disable select controls.

$('select').selectMania({
  // enable removable
  removable: false,
  // enable searchable
  search: false,
  
});

8. Set the placeholder text:

$('select').selectMania({
  placeholder: 'Please select me!'
});

9. To enable AJAX content support:

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

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

/* SELECTMANIA ELEMENT */
.select-mania-theme-[CHANGE-THE-NAME-HERE] .select-mania-inner { border: 1px solid #D6D6D6; }
/* SELECTED VALUES */
.select-mania-theme-[CHANGE-THE-NAME-HERE].select-mania.select-mania-multiple .select-mania-value {
 border: 1px solid [YOUR-COLOR];
 background-color: [YOUR-COLOR]; color: white; }
/*  DROPDOWN */
.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] .select-mania-item.select-mania-selected {
 background: [YOUR-COLOR]; color: white; }

11. API methods.

// update
$('select').selectMania('update');
// destroy
$('select').selectMania('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
$('select').selectMania('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