Multiple Select

Multiple Select

  • Getting started
  • Documentation
  • Examples
  • Vue Component
  • Vue Examples
  • Online Editor
  • GitHub

›Documentation

Documentation

  • Options
  • Events
  • Methods
  • Localizations
  • Themes

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 the 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

classInput

  • Attribute: data-class-input

  • Type: String

  • Detail: The class of input radio/checkbox.

  • Default: ''

  • Example: The Themes

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'),
    • Finally, we will use the last locale file loaded (or the default locale if no locales are 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.

  • 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 the width of multiple items.

  • 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 of 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: Customize 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 were 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 hovering instead of clicking.

  • Default: false

  • Example: Open On Hover

container

  • Attribute: data-container

  • Type: object

  • Detail: Define a custom container to solve the cut-off problem. For example, the 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. It 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.

  • Default: undefined

  • Example: Filter By Data Length

filterSelectAll

  • Attribute: data-filter-select-all

  • Type: Boolean

  • Detail: Show select all checkbox in the filter.

  • Default: undefined

  • Example: Filter Select All

customFilter

  • Attribute: -

  • Type: function

  • Detail: The custom filter function returns a boolean to filter or not, containing parameter: { text, label, search }.

  • 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 animation of opening or closing the dropdown. It can be undefined, 'fade' and 'slide'.

  • Default: undefined

  • Example: The Animate

styler

  • Attribute: -

  • Type: function

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

  • Default: { return false }

  • Example: The Styler

textTemplate

  • Attribute: -

  • Type: function

  • Detail: The item textTemplate function returns a string to customize the item text, containing the 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 →
  • name
  • placeholder
  • classes
  • classPrefix
  • classInput
  • data
  • locale
  • selectAll
  • single
  • singleRadio
  • multiple
  • hideOptgroupCheckboxes
  • multipleWidth
  • width
  • size
  • dropWidth
  • maxHeight
  • maxHeightUnit
  • position
  • displayValues
  • displayTitle
  • displayDelimiter
  • minimumCountSelected
  • ellipsis
  • isOpen
  • keepOpen
  • openOnHover
  • container
  • filter
  • filterGroup
  • filterPlaceholder
  • filterAcceptOnEnter
  • filterByDataLength
  • filterSelectAll
  • customFilter
  • showClear
  • animate
  • styler
  • textTemplate
  • labelTemplate
  • GitHub
  • Twitter
  • My website
  • My repos
  • Email
Copyright © 2010-2025 wenzhixin.net.cn