SumoSelect – A cross device jQuery Select Plugin


The jQuery.SumoSelect script replaces the default, ugly Select form fields with design- and configurable Cross-Device Select Boxes. The script itself requires jQuery (at least v.1.8.3) and is compatible with 8, 5, 4, 4 and 11. Please Note: The latest jQuery libraries doesn’t has such a deep browser-compatibility, so you NEED a older jQuery Version if you want to still support the Internet Explorer 8!

This Select replacement supports Single and Multiple Selection fields including Pre-Selected / Pre-Disabled options and Optgroups. A Search function, Handle Buttons as well as some basic methods to manipulate the selection list are included as well. It’s also completely translat- and designable, and allows to render the device-native Popup field if desired! It still works seamless, even if it’s not maintained since 2016!

Download the latest version of jQuery.SumoSelect as .ZIP or as .TAR package!

npm i sumoselect --save

yarn add sumoselect --save

bower install sumoselect --save


The package itself contains the main JavaScript file, as normal and minified version, as well as a default Stylesheet, also available as minified version. The Stylesheet is maybe a bit confusing, according to the Indents, but after you beautify this few lines you can easily adapt the jQuery.SumoSelect script to your websites-native design!


Load SumoSelect

It’s highly recommended to load the Stylesheet between the HTML <head> tags. The JavaScript can located wherever you want, but we recommend it to load it directly after the first HTML <body> tag.

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/sumoselect.css" />
        <!-- Required jQuery Library -->
        <script type="text/javascript" src=""></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/jquery.sumoselect.min.js"></script>


Configure SumoSelect

The current version of this Select Replacement Script supports 21 options, to configure the design and it’s behavior. There are also 6 options, which allows to translate the respective strings into your own native language!

        placehoder:                 "Select Here",
        csvDispCount:               3,
        captionFormat:              "{0} Selected",
        captionFormatAllSelected:   "{0} all selected!",
        floatWidth:                 400,
        forceCustomRendering:       false,
        nativeOnDevice:             [
            "Android", "BlackBerry", "iPhone", "iPad", "iPod", "Opera Mini", "IEMobile", "Silk"
        outputAsCSV:                false,
        csvSepChar:                 ",",
        okCancelInMulti:            false,
        isClickAwayOk:              false,
        triggerChangeCombined:      true,
        selectAll:                  false,
        search:                     false,
        searchText:                 "Search...",
        searchFn:                   function(haystack, needle){
            return haystack.toLowerCase().indexOf(needle.toLowerCase()) < 0;
        noMatch:                    'No matches for "{0}"',
        prefix:                     "",
        locale:                     ["OK", "Cancel", "Select All"],
        up:                         false,
        showTitle:                  true


Configure: Options

The palceholder text to be displayed in the rendered select widget (on priority basis). Maximum priority is given to native placeholder attribute in select tag i.e. - <select placeholder="Placeholder String"> - Then the option with disabled and selected attribute i.e. <option disabled selected value="foo"> - Last to to the given placeholder attribute in the settings.
The number of items to be displayed in the widget seperated by a , after that the text will be warped as 3+ Selected. Set 0 for all the options.
Its the format in which you want to see the caption when more than csvDispCount items are selected. Its default value is '{0} Selected' (The {0} will be replaced by the seletion count)
Format of caption text when all elements are selected. set null to use captionFormat. It will not work if there are disabled elements in select.
Minimum screen width of device below which the options list is rendered in floating popup fashion.
Force the custom modal (Floating list) on all devices below floatWidth resolution.
The keywords to identify a mobile device from useragent string. The system default select list is rendered on the matched device.
true to POST data as csv.
Seperation char if outputAsCSV is set to true,
Displays OK and Cancel buttons in desktop mode multiselect also.
For okCancelInMulti = true. Sets whether click outside will trigger OK or Cancel (default is Cancel).
In Multiselect mode whether to trigger change event on individual selection of each item or on combined selection (pressing of OK or Cancel button).
To display select all check or not
To enable searching in sumoselect.
Placeholder for the search input.
Placeholder to display if no items matches the search term.
Prefix to prepend the selected options-text.
Change the text used within the plugin (['OK', 'Cancel', 'Select All']). Note: don't break the sequence or skip items.
The direction in which to open the dropdown field.
Set this option to false to prevent title (tooltip) from appearing.

Leave a Reply