Class HTMLMultiSelectElement

Provide a multi-select workflow using a select element as the input mechanism.

Example: Multi-Select HTML Markup

<multi-select name="select-many-things">
  <optgroup label="Basic Options">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </optgroup>
  <optgroup label="Advanced Options">
   <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </optgroup>
</multi-select>

Hierarchy (view full)

Properties

_primaryInput _options _choices _internals #select #tags tagName formAssociated

Accessors

form name value disabled editable

Methods

_buildElements _refresh _activateListeners _toggleDisabled select unselect _getValue _setValue connectedCallback _applyInputAttributes _initialize _onClick #onChangeSelect #onClickTag create

Properties

Protected _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

Protected _options

_options: (HTMLOptGroupElement | HTMLOptionElement)[]

Predefined elements which were defined in the original HTML.

Protected _choices

_choices: Record<string, string> = {}

An object which maps option values to displayed labels.

Protected _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

Private #select

#select: HTMLSelectElement

A select element used to choose options.

Private #tags

#tags: HTMLDivElement

A display element which lists the chosen options.

Static tagName

tagName: string = "multi-select"

Static formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

form

  • get form(): HTMLFormElement

  • The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

  • The input element name.

    Returns string

value

disabled

  • get disabled(): boolean

  • Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

  • Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

Methods

_buildElements

_refresh

_activateListeners

_toggleDisabled

select

  • select(value): void

  • Mark a choice as selected.

    Parameters

    • value: string

      The value to add to the chosen set

    Returns void

unselect

  • unselect(value): void

  • Mark a choice as un-selected.

    Parameters

    • value: string

      The value to delete from the chosen set

    Returns void

_getValue

_setValue

connectedCallback

_applyInputAttributes

  • _applyInputAttributes(input): void
  • Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: any

    Returns void

Protected _initialize

Protected _onClick

  • _onClick(event): void
  • Protected

    Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.

    Parameters

    • event: PointerEvent

    Returns void

Private #onChangeSelect

  • #onChangeSelect(event): void

  • Handle changes to the Select input, marking the selected option as a chosen value.

    Parameters

    • event: Event

      The change event on the select element

    Returns void

Private #onClickTag

  • #onClickTag(event): void

  • Handle click events on a tagged value, removing it from the chosen set.

    Parameters

    • event: PointerEvent

      The originating click event on a chosen tag

    Returns void

Static create

Settings

Member Visibility

Theme

On This Page

_primaryInput_options_choices_internals#select#tagstagNameformAssociatedformnamevaluedisablededitable_buildElements_refresh_activateListeners_toggleDisabledselectunselect_getValue_setValueconnectedCallback_applyInputAttributes_initialize_onClick#onChangeSelect#onClickTagcreate