Brute Select

Simple select implementation with customizable styles. It retains default browser behavior for dropdown list itself while making possible adjusting all aspects of collapsed view of select.

What makes Brute Select really different is an ability to customize every aspect of it's looks and behavior by providing configuration functions instead of limited scalar options used in most jQuery plugins.

Demo

Default params

This is how select looks like and behaves by default. First Second Third

<script>
    $('#select-default').bruteSelect();
</script>

Custom Formatter

Showing both title and value from select First Second Third

<script>
$('#select-custom').bruteSelect({
    formatter: function(title, value) {
        return title + ' <strong>(' + value + ')</strong>';
    },
    allowHtmlInTitle: true
});
</script>

Getting Started

Download the latest version from github. Then in your web page:

<script src="jquery.js"></script>
<script src="dist/brute-select.min.js"></script>
<link rel="stylesheet" href="dist/brute-select.css">
<script>
$(function() {
    $('select').bruteSelect();
});
</script>

Configuration

You can pass configuration object to plugin initialization with parameters described below:

baseName string

Base for all string entities related to brute select including base part of element classes when using default generateClassName function.

Defaults to brute-select

generateClassName function (elementNameOrModifier, isModifier)

Generates appropriate class names for select elements in generated markup. It can be used to adjust class names to conform to specific naming guidelines, like the ones used in BEM.

Default implementation just appends elementNameOrModifier to baseName with - in the middle and can be accessed via $.fn.bruteSelect.generateClassName.

Here is an sample implementation of BEM-style class generation:

$('select').bruteSelect({
    generateClassName: function (elementNameOrModifier, isModifier) {
        var cls = this.baseName;
        if(elementNameOrModifier) {
            cls += (isModifier ? '_' : '__') + elementNameOrModifier;
        }
        return cls;
    }
});

formatter function (title, value, $select, $el)

Allows you to customize the way you format the title of currently selected option inside the select. If you wish to use some html for formatting be sure to disable stripTagsInTitle option.

Default implementation just returns title and can be accessed via $.fn.bruteSelect.formatter.

Must return string value.

allowHtmlInTitle boolean

Defaults to false meaning that Brute Select will use jQuery text() method to update formatted option title. Allowing html inside the title could allow for XSS vulnerability if option list is generated by users and is not filtered in formatter or on the server side.

markup function ($select)

You can use this configuration function to customize generated markup or in the case you want to generate markup by some other means (like server side) and provide ready-to-use references to necessary elements for brute select functionality.

Must return object with following properties.

{
    $el: $(...),
    $title: $(...)
}

Function Context

All of the configuration functions are merged into special object that contains state of the select and handles user interactions. Apart from ability to access all the other configuration options within configuration function it also provides references to top-most generated markup element via this.$el, current item title via this.$title, and original select via this.$select.

Global Configuration

All of the previously listed options are also available in $.fn.bruteSelect.options object that contains default options for the plugin allowing you to adjust them globally.

Further Extending

If you need even more control or wish to extend functionality of this plugin, you can extend base class that handles state and user interactions. It is accessible via $.fn.bruteSelect.klass.

Licensing

Licensed under permissive MIT-style license.