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.

How to use it:

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; }

10. More plugin options.

$('select').selectMania({

  // the select value will be forced as empty on initialization
  empty: false, 

  // scroll container
  scrollContainer: null, 

  // z-inde
  zIndex: null,

  // is hidden?
  hidden: false

});

11. API methods.

// update
$('select').selectMania('update');

// clear
$('select').selectMania('clear');

// open
$('select').selectMania('open');

// update
$('select').selectMania('update');

// close
$('select').selectMania('close');

// 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'
    }
]);

Changelog:

v1.6.2 (2018-09-04)

• fix check method

v1.6.1 (2018-09-02)

• fix dropdown font color

v1.6 (2018-08-31)

• hidden option + fixes

v1.6 (2018-08-01)

• fix placeholder overflow

v1.5.1 (2018-07-28)

• fix placeholder overflow
• initial value rework

2018-06-19

• v1.4: hidden settings + hide and show methods

2018-06-14

• v1.3: add open and close methods; fix destroy

2018-01-12

• v1.2: fix set clean update

2018-01-03

• v1.1.6: CSS fixed.

2017-12-26

• v1.1.5: fixed color

2017-12-26

• v1.1.4: font size in pixel and line height cleaning

2017-12-21

• v1.1.3: keyboard controls + scroll container option + disabled attribute on select

2017-12-08

• v1.1.2

2017-12-06

• fix scroll container option

2017-11-16

• v1.0.6

2017-11-08

• fix empty option

---

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