Options


The Options are defined in jQuery.fn.multipleSelect.defaults.

name

Type: String

Detail: The name of select element.

Default: ''

placeholder

Type: String

Detail: A placeholder value can be defined and will be displayed until you select an item.

Default: ''

Example: The Placeholder

selectAll

Type: Boolean

Detail: Show selects all checkbox.

Default: true

Example: Hide Select All

single

Type: Boolean

Detail: Allows you to select only one option.

Default: false

Example: Single Row

multiple

Type: Boolean

Detail: Show multiple items in a row.

Default: false

Example: Multiple Items

hideOptgroupCheckboxes

Type: Boolean

Detail: Hide the optgroup checkboxes.

Default: false

Example: Hide Optgroup Check

multipleWidth

Type: Number

Detail: Show multiple items width.

Default: 80

Example:

  • Multiple Items
  • width

    Type: undefined

    Detail: Define the width property of the select, support a percentage setting.

    Default: undefined

    Example: Custom Dropdown Width

    dropWidth

    Type: undefined

    Detail: Define the dropdown width.

    Default: undefined

    Example: Custom Dropdown Width

    maxHeight

    Type: Number

    Detail: Define the maximum height property of the dropdown list.

    Default: 250

    Example: Max Height

    position

    Type: String

    Detail: Defines the position of the select dropdown, can only be 'bottom' or 'top'.

    Default: bottom

    Example: The Position

    displayValues

    Type: Boolean

    Detail: Display selected values instead text.

    Default: false

    Example: Display Values

    displayTitle

    Type: Boolean

    Detail: Display the title of selected text.

    Default: false

    Example: Display Title

    displayDelimiter

    Type: String

    Detail: Custom the display delimiter.

    Default: ,

    Example: Display Delimiter

    minimumCountSelected

    Type: Number

    Detail: formatCountSelected will be shown only if more than minimumCountSelected items where selected.

    Default: 3

    Example: Minimum Count Selected

    ellipsis

    Type: Boolean

    Detail: Add '...' after selected options if minimumCountSelected is set. Overrides formatCountSelected option.

    Default: false

    Example: The Ellipsis

    isOpen

    Type: Boolean

    Detail: Open the select dropdown by default.

    Default: false

    Example: Is Open

    keepOpen

    Type: Boolean

    Detail: Keep the select dropdown always open.

    Default: false

    Example: Keep Open

    openOnHover

    Type: Boolean

    Detail: Open the select dropdown by hover instead of click.

    Default: false

    Example: Open On Hover

    container

    Type: object

    Detail: Define custom container to solve the cut off problem for example parent node is overflow: hidden.

    Default: null

    Example: The Container

    filter

    Type: Boolean

    Detail: Show a search field to search through checkbox items.

    Default: false

    Example: Basic Filter Filter With Optgroup

    filterGroup

    Type: Boolean

    Detail: Filter optgroups only and not options.

    Default: false

    Example: Filter Only Optgroup

    filterPlaceholder

    Type: String

    Detail: Set the filter placeholder.

    Default: ``

    Example: Filter Placeholder

    filterAcceptOnEnter

    Type: Boolean

    Detail: Speed up keyboard use. Enter filter text and then hit enter or space will auto click select all and close the dropdown.

    Default: false

    Example: Filter Accept On Enter

    animate

    Type: undefined

    Detail: Define the animate of open or close the dropdown. Can be undefined, 'fade' and 'slide'.

    Default: undefined

    Example: The Animate

    styler

    Type: function

    Detail: The item styler function, return style string to custom the item style, contains parameter: value.

    Default: { return false }

    Example: The Styler

    textTemplate

    Type: function

    Detail: The item textTemplate function, return string to custom the item text, contains parameter: $elm.

    Default: { return $elm[0].innerHTML }

    Example: Text Template

    labelTemplate

    Type: function

    Detail: The item labelTemplate function, return string to custom the optgroup label, contains parameter: $elm.

    Default: { return $elm[0].getAttribute('label') }

    Example: Label Template

    Events


    To use event syntax:

    $('#select').multipleSelect({
      onEventName: function (arg1, arg2, ...) {
        // ...
      }
    })
    

    Example: The Event

    onOpen

    • Parameter: -

    • Detail: Fires when the dropdown list is open.

    onClose

    • Parameter: -

    • Detail: Fires when the dropdown list is close.

    onCheckAll

    • Parameter: -

    • Detail: Fires when all the options are checked by either clicking the "Select all" checkbox or when the "checkall" method is programatically called.

    onUncheckAll

    • Parameter: -

    • Detail: Fires when all the options are unchecked by either clicking the "Select all" checkbox or when the "uncheckall" method is programatically called.

    onFocus

    • Parameter: -

    • Detail: Bind an event handler to the "focus".

    onBlur

    • Parameter: -

    • Detail: Bind an event handler to the "blur".

    onOptgroupClick

    • Parameter: view

    • Detail: Fires when a an optgroup label is clicked on. The view parameter is an object, it contains label, checked, children.

    onClick

    • Parameter: view

    • Detail: Fires when a checkbox is checked or unchecked. The view parameter is an object, it contains label, value, checked.

    onFilter

    • Parameter: text

    • Detail: Fires after the Multiple Select is on filter.

    onAfterCreate

    • Parameter: -

    • Detail: Fires after the Multiple Select is created.

    Methods


    The calling method syntax:

    $('#multiple').multipleSelect('method', parameter)
    

    getSelects

    • Parameter: type

    • Detail: Gets the selected values. The type can be 'value' or 'text', default is 'value'.

    • Example: setSelects-getSelects

    setSelects

    • Parameter: values

    • Detail: Sets the selected values. The values should be an array.

    • Example: setSelects-getSelects

    enable

    • Parameter: -

    • Detail: Enables multiple select.

    • Example: enable-disable

    disable

    • Parameter: -

    • Detail: Disables multiple select. During this mode, the user is not allowed to manipulate the selection.

    • Example: enable-disable

    open

    • Parameter: -

    • Detail: Open multiple select.

    • Example: open-close

    close

    • Parameter: -

    • Detail: Close multiple select.

    • Example: open-close

    checkAll

    uncheckAll

    focus

    • Parameter: -

    • Detail: Focus the multiple select.

    • Example: focus-blur

    blur

    • Parameter: -

    • Detail: Blur the multiple select.

    • Example: focus-blur

    refresh

    • Parameter: -

    • Detail: Reloads the Multiple Select. If you're dynamically adding/removing option tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes.

    • Example: refresh

    destroy

    • Parameter: -

    • Detail: Destroy the Multiple Select. If you want remove the multiple select properties.

    • Example: destroy

    Localizations


    The localizations syntax:

    $('#multiple').multipleSelect({
      formatMessage: function () {
        return 'Format message'
      }
    })
    

    Example: The i18n

    formatSelectAll

    • Parameter: undefined

    • Default: '[Select all]'

    formatAllSelected

    • Parameter: undefined

    • Default: 'All selected'

    formatCountSelected

    • Parameter: count, total

    • Default: count + ' of ' + total + ' selected'

    formatNoMatchesFound

    • Parameter: undefined

    • Default: 'No matches found'