Options

The options API of Multiple Select.

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

name

  • Attribute: name

  • Type: String

  • Detail: The name of select element.

  • Default: ''

  • Example: Submit Select

placeholder

  • Attribute: placeholder

  • Type: String

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

  • Default: ''

  • Example: The Placeholder

classes

  • Attribute: data-classes

  • Type: String

  • Detail: The class name of select.

  • Default: ''

  • Example: The Classes

classPrefix

  • Attribute: data-class-prefix

  • Type: String

  • Detail: The class prefix of select.

  • Default: ''

  • Example: The Classes

data

  • Attribute: -

  • Type: Array

  • Detail: The data to be loaded.

    The optgroup object contains these parameters:

    • type: 'optgroup'.
    • label: the label of optgroup.
    • visible: where to display this optgroup.
    • selected: where to select this optgroup.
    • disabled: where to disable this optgroup.
    • children: the options of this optgroup.

    Examples:

    <optgroup label="group1">
  <option value="1">option 1</option>
</optgroup>

    [
  {
    type: 'optgroup',
    label: 'Group 1',
    children: [
      {
        text: 'Option 1',
        value: 1
      }
    ]
  }
]

    The option object contains these parameters:

    • text: the text of option.
    • value: the value of option.
    • visible: where to display this option.
    • selected: where to select this option.
    • disabled: where to disable this option.
    • classes: the class of the option.
    • title: the title of the option.
    • divider: display this option as a divider.

    Examples:

    <option value="1">Option 1</option>
<option data-divider="true"></option>
<option value="2">Option 2</option>

    [
  {
    text: 'Option 1',
    value: 1
  },
  {
    divider: true
  },
  {
    text: 'Option 2',
    value: 2
  }
]

    Or Object:

    {
  1: 'Option 1'
}

    Or String/Number Array:

    ['option1']


[1]

  • Default: []

  • Example: The Data.

locale

  • Attribute: data-locale

  • Type: String

  • Detail:

    Sets the locale to use (i.e. 'zh-CN'). Locale files must be pre-loaded. Allows for fallback locales, if loaded, in the following order:

    • First tries for the locale as specified,
    • Then tries the locale with '_' translated to '-' and the region code upper cased,
    • Then tries the short locale code (i.e. 'zh' instead of 'zh-CN'),
    • And finally will use the last locale file loaded (or the default locale if no locales loaded).

    If left undefined or an empty string, use the last locale loaded (or 'en-US' if no locale files loaded).

  • Default: undefined

  • Example: The Locale

selectAll

  • Attribute: data-select-all

  • Type: Boolean

  • Detail: Show selects all checkbox.

  • Default: true

  • Example: Hide Select All

single

  • Attribute: data-single

  • Type: Boolean

  • Detail: Allows you to select only one option, if the select has not multiple attribute, this option will auto set to true.

  • Default: undefined

  • Example: Single Row

singleRadio

  • Attribute: data-single-radio

  • Type: Boolean

  • Detail: Allows you to show the radio input when single is set to true (from v1.4.0).

  • Default: false

  • Example: Single Radio

multiple

  • Attribute: data-multiple

  • Type: Boolean

  • Detail: Show multiple items in a row.

  • Default: false

  • Example: Multiple Items

hideOptgroupCheckboxes

  • Attribute: data-hide-optgroup-checkboxes

  • Type: Boolean

  • Detail: Hide the optgroup checkboxes.

  • Default: false

  • Example: Hide Optgroup Check

multipleWidth

  • Attribute: data-multiple-width

  • Type: Number

  • Detail: Show multiple items width.

  • Default: 80

  • Example:

  • Multiple Items

width

  • Attribute: data-width

  • Type: undefined

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

  • Default: undefined

  • Example: Custom Dropdown Width

size

  • Attribute: data-size

  • Type: String

  • Detail: The size of select.

  • Default: ''

  • Example: The Classes

dropWidth

  • Attribute: data-drop-width

  • Type: undefined

  • Detail: Define the dropdown width.

  • Default: undefined

  • Example: Custom Dropdown Width

maxHeight

  • Attribute: data-max-height

  • Type: Number

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

  • Default: 250

  • Example: Max Height

maxHeightUnit

  • Attribute: data-max-height-unit

  • Type: String

  • Detail: Define the unit of the maxHeight option, can only be 'px' or 'row'.

  • Default: px

  • Example: Max Height Unit

position

  • Attribute: data-position

  • Type: String

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

  • Default: bottom

  • Example: The Position

displayValues

  • Attribute: data-display-values

  • Type: Boolean

  • Detail: Display selected values instead text.

  • Default: false

  • Example: Display Values

displayTitle

  • Attribute: data-display-title

  • Type: Boolean

  • Detail: Display the title of selected text.

  • Default: false

  • Example: Display Title

displayDelimiter

  • Attribute: data-display-delimiter

  • Type: String

  • Detail: Custom the display delimiter.

  • Default: ,

  • Example: Display Delimiter

minimumCountSelected

  • Attribute: data-minimum-count-selected

  • Type: Number

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

  • Default: 3

  • Example: Minimum Count Selected

ellipsis

  • Attribute: data-ellipsis

  • Type: Boolean

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

  • Default: false

  • Example: The Ellipsis

isOpen

  • Attribute: data-is-open

  • Type: Boolean

  • Detail: Open the select dropdown by default.

  • Default: false

  • Example: Is Open

keepOpen

  • Attribute: data-keep-open

  • Type: Boolean

  • Detail: Keep the select dropdown always open.

  • Default: false

  • Example: Keep Open

openOnHover

  • Attribute: data-open-on-hover

  • Type: Boolean

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

  • Default: false

  • Example: Open On Hover

container

  • Attribute: data-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

  • Attribute: data-filter

  • Type: Boolean

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

  • Default: false

  • Example: The Filter

filterGroup

  • Attribute: data-group

  • Type: Boolean

  • Detail: Filter optgroups only and not options.

  • Default: false

  • Example: Filter Only Optgroup

filterPlaceholder

  • Attribute: data-filter-placeholder

  • Type: String

  • Detail: Set the filter placeholder.

  • Default: ``

  • Example: Filter Placeholder

filterAcceptOnEnter

  • Attribute: data-filter-accept-on-enter

  • 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

filterByDataLength

  • Attribute: data-filter-by-data-length

  • Type: Number

  • Detail: Auto enable filter when the data(options) length is more than the set number (from 1.4.1).

  • Default: undefined

  • Example: Filter By Data Length

customFilter

  • Attribute: -

  • Type: function

  • Detail: The custom filter function, return boolean to filter or not, contains parameter: { text, label, search } (from 1.6.0).

  • Default: { return (label || text).includes(search) }

  • Example: Custom Filter

showClear

  • Attribute: data-show-clear

  • Type: undefined

  • Detail: Show the clear icon to uncheck all selected items.

  • Default: false

  • Example: Show Clear

animate

  • Attribute: data-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

  • Attribute: -

  • Type: function

  • Detail: The item styler function, return style string to custom the item style, contains parameter: row. (updated 1.4.1)

  • Default: { return false }

  • Example: The Styler

textTemplate

  • Attribute: -

  • 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

  • Attribute: -

  • 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 →